2017-09-05 15 views
0

私は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(); 
}); 

答えて

0

はのは唯一、このボタンを見てみましょう、他はまったく同じ問題を抱えている...

<button id="send2" onclick="App.update_exchange_Rate()">update_exchange_Rate</button> 

のonclick属性には期待してい関数を受け取る。その機能は、クリックごとに呼び出されます。しかし、この関数は関数自体を返しません。

App.update_exchange_Rate()は、ブラウザがその部分を見るとすぐに実行され、戻り値が使用されます。しかし、それは私たちが望むものではありません!もしあれば、

<button id="send2" onclick="App.update_exchange_Rate">update_exchange_Rate</button> 

または

<button id="send2" onclick="function(){App.update_exchange_Rate();}">update_exchange_Rate</button> 

今:私たちは、だから我々はそうのように、属性への呼び出し機能を与える必要があり、ないと思います...その関数を実行したいです期待していない範囲で確実に終わるでしょう。関数内でthisを使用していないので、スコープ部分をスキップします。必要に応じて後で読むことができます。

+0

答えに感謝します。私はあなたの提案を試みましたが、App.update_exchange_Rate()またはApp.distribute()から "()"を削除すると実行されません。 –

+0

別の可能性を追加しました。 HTMLが描画されたときにオブジェクトと関数を宣言しなければならなかった。無名関数を使用するとこれを回避できます。 – Salketer

+0

ありがとう、私もそれを試みた。私が追加したばかりの「編集」セクションをご覧ください。 –

関連する問題