私はSolidity(スマートコントラクト用)を学んでおり、今はデプロイメント契約と対話するためのUIを設計する必要があります。2つの関数呼び出しをHTMLファイルに挿入する方法は?
注:質問がこのフォーラムに関連しない場合は、私に教えてください(downvotingの代わりに)、私はそれを削除します。
HTMLと.jsファイルは以下のとおりです。問題は、.jsファイルに "distribute()"と "update_exchange_rate()"の両方の関数を含めると、HTMLファイルが機能しなくなることです。しかし、.jsファイルからどちらかを削除しても問題はありません。
質問:なぜこの問題が発生していますか?上記の問題を解決するには? window.appに複数の関数(定義)を持つことはできますか?
編集:両方の機能を.jsファイルに入れると、webpackエラーも発生します。しかし、機能の1つを削除するとエラーが消えてしまいます。
<!DOCTYPE html>
<html>
<head>
<script src="./app.js"></script>
</head>
<body>
<h1>MetaCoin</h1>
<h2>Example Truffle Dapp</h2>
<br>
<br><label for="amountB">Exchange rate:</label><input type="text"
id="amountA" placeholder="e.g., 95"></input>
<br><label for="receiverA">ReceiverA:</label><input type="text"
id="receiverA" placeholder="e.g., 95"></input>
<br><label for="receiverB">ReceiverB:</label><input type="text"
id="receiverB" placeholder="e.g., 95"></input>
<br><br><button id="send1" onclick="App.distribute()">Send
MetaCoin</button>
<br><br>
<br><label for="amountB">Exchange rate:</label><input type="text"
id="amountB" placeholder="e.g., 95"></input>
<br><br><button id="send2"
onclick="App.update_exchange_Rate()">update_exchange_Rate</button>
<br><br>
<br>
</body>
</html>
と私のjsファイルです:
import "../stylesheets/app.css";
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'
import metacoin_artifacts from '../../build/contracts/MetaCo.json'
var MetaCo = contract(metacoin_artifacts);
var accounts;
var account;
window.App = {
start: function() {
MetaCo.setProvider(web3.currentProvider);
web3.eth.getAccounts(function(err, accs) {
if (err != null) {
alert("There was an error fetching your accounts.");
return;
}
if (accs.length == 0) {
alert("Couldn't get any accounts! Make sure your Ethereum client is
configured correctly.");
return;
}
accounts = accs;
account = accounts[0];
});
},
setStatus: function(message) {
var status = document.getElementById("status");
status.innerHTML = message;
},
distribute: function() { // XXX Here is where the problem occures!
var amountA = parseInt(document.getElementById("amountA").value);
var receiver1= document.getElementById("receiverA").value;
var receiver2 = document.getElementById("receiverB").value;
var meta;
MetaCo.deployed().then(function(instance2) {
meta = instance2;
return meta.distribute(receiver1,receiver2, amountA,{from: account});
})
}
update_exchange_Rate: function() { // XXX Here is where the problem occures!
var amountB = parseInt(document.getElementById("amountB").value);
var meta1;
MetaCo.deployed().then(function(instance3) {
meta1 = instance3;
return meta1.update_exchange_Rate(amountB,{from: account});
})
}
};
window.addEventListener('load', function() {
if (typeof web3 !== 'undefined') {
console.warn("Using web3 detected from external source. If you find
that your accounts don't appear or you have 0 MetaCoin, ensure you've
configured that source properly. If using MetaMask, see the following
link.
Feel free to delete this warning. :)
http://truffleframework.com/tutorials/truffle-and-metamask")
// Use Mist/MetaMask's provider
window.web3 = new Web3(web3.currentProvider);
} else {
console.warn("No web3 detected. Falling back to http://localhost:8545.
You should remove this fallback when you deploy live, as it's
inherently
insecure. Consider switching to Metamask for development. More info
here:
http://truffleframework.com/tutorials/truffle-and-metamask");
// fallback - use your fallback strategy (local node/hosted node +
in-dapp id mgmt/fail)
window.web3 = new Web3(new
Web3.providers.HttpProvider("http://localhost:8545"));
}
App.start();
});
答えに感謝します。私はあなたの提案を試みましたが、App.update_exchange_Rate()またはApp.distribute()から "()"を削除すると実行されません。 –
別の可能性を追加しました。 HTMLが描画されたときにオブジェクトと関数を宣言しなければならなかった。無名関数を使用するとこれを回避できます。 – Salketer
ありがとう、私もそれを試みた。私が追加したばかりの「編集」セクションをご覧ください。 –