从同一个onclick调用两个函数[重复]答案

【问题标题】：Call two functions from same onclick [duplicate]从同一个onclick调用两个函数[重复]
【发布时间】：2013-04-15 21:38:48
【问题描述】：

HTML & JS

如何从一个 onclick 事件中调用 2 个函数？这是我的代码

 <input id ="btn" type="button" value="click" onclick="pay() cls()"/>

两个函数是 pay() 和 cls()。谢谢！

【问题讨论】：

【解决方案1】：

在函数调用的末尾添加分号;，以使它们都能正常工作。

 <input id="btn" type="button" value="click" onclick="pay(); cls();"/>

我不相信最后一个是必需的，但是嘿，不妨将它添加进去。

【讨论】：

【解决方案2】：

您可以创建一个函数来调用这两个函数，然后在事件中使用它。

function myFunction(){
    pay();
    cls();
}

然后，对于按钮：

<input id="btn" type="button" value="click" onclick="myFunction();"/>

【讨论】：

可以，但在我看来它不是那么透明，或者在函数不相关的情况下，它可能被命名为类似于 funtion1_function2() 之类的名称。
不会比只做 onclick="pay(); cls();" 有更多的开销吗？ ?
@Am33d 一个重载，转换为堆栈中的一个单元和半毫秒的额外处理时间。这对于提高可读性和易于维护是非常值得的。想象一下，将来您必须添加三个带有条件逻辑的额外方法。

【解决方案3】：

你可以从另一个函数内部调用函数

<input id ="btn" type="button" value="click" onclick="todo()"/>

function todo(){
pay(); cls();
}

【讨论】：

【解决方案4】：

onclick="pay(); cls();"

但是，如果您在“pay”函数中使用 return 语句，则执行将停止，“cls”将不会执行，

解决方法：

onclick="var temp = function1();function2(); return temp;"

【讨论】：

【解决方案5】：

不推荐从 html 绑定事件。这是推荐的方式：

document.getElementById('btn').addEventListener('click', function(){
    pay();
    cls();
});

【讨论】：

【解决方案6】：

使用 jQuery：

jQuery("#btn").on("click",function(event){
    event.preventDefault();
    pay();
    cls();
});

【讨论】：

【解决方案7】：

只是为了提供一些多样性，comma operator 也可以使用，但有些人可能会说“noooooo！”，但它确实有效：

<input type="button" onclick="one(), two(), three(), four()"/>

【讨论】：

【解决方案8】：

试试这个

<input id ="btn" type="button" value="click" onclick="pay();cls()"/>

【讨论】：

【解决方案9】：

在两个函数之间加一个分号作为语句终止符。

【讨论】：