如何将两个函数调用放在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(); 
});

答

让我们仅此按钮，其他有相同问题？

<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，所以我将跳过该范围部分，如果需要，您可以稍后阅读它。

感谢您的回答。我尝试了你的建议，但如果我从App.update_exchange_Rate（）或App.distribute（）中删除“（）”，它将不会运行。 –

我增加了另一种可能性。在绘制HTML时，必须声明对象和函数，但情况可能并非如此。使用匿名函数将绕过这一点。 – Salketer

谢谢，我也试过。你可以看看我刚刚添加的“编辑”部分。 –

如何将两个函数调用放在HTML文件中？

相关推荐