如何將兩個函數調用放在HTML文件中？

我正在學習Solidity（用於智能合同），現在需要設計一個UI來與部署合同進行交互。如何將兩個函數調用放在HTML文件中？

注意：如果問題與本論壇無關，請讓我知道（而不是downvoting），我會將其刪除。

我的HTML和.js文件如下。問題是，當我在.js文件中同時包含「distribute（）」和「update_exchange_rate（）」函數時，我的HTML文件將無法工作。但是如果我從.js文件中刪除它們中的任何一個，我都不會有任何問題。

問題：爲什麼我有這個問題？如何解決上述問題？我可以在window.app中有多個函數（定義）嗎？

編輯：如果我把兩個函數放在.js文件中，我也會得到webpack錯誤。但是如果我刪除其中一個功能，錯誤將會消失。

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

來源

2017-09-05 Adrian Ad

讓我們僅此按鈕，其他有相同問題？

<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，所以我將跳過該範圍部分，如果需要，您可以稍後閱讀它。

來源

2017-09-05 12:49:54 Salketer

感謝您的回答。我嘗試了你的建議，但如果我從App.update_exchange_Rate（）或App.distribute（）中刪除「（）」，它將不會運行。 –

我增加了另一種可能性。在繪製HTML時，必須聲明對象和函數，但情況可能並非如此。使用匿名函數將繞過這一點。 – Salketer

謝謝，我也試過。你可以看看我剛剛添加的「編輯」部分。 –

如何將兩個函數調用放在HTML文件中？

回答

相關問題