如何添加onclick按钮事件？答案

【问题标题】：How to add an onclick button event?如何添加onclick按钮事件？
【发布时间】：2013-12-13 20:53:29
【问题描述】：

我在我的 html 表单中的一个按钮上添加了一个小的 onclick 事件，但它不起作用。这是我添加的一个，这是一个基本的

function myFunction()
{
alert("Hello World!");
}

在html中

<button onclick="myFunction" class="btn btn-1 btn-1c">Credit Card</button>

但这不起作用，请检查小提琴http://jsfiddle.net/RzT68/8/。如果该字段未填写，则会出现另一个弹出窗口，但我不知道如何在单击按钮时将其删除。

【问题讨论】：

不要使用内联js。相反，您可以使用 javascript 的 document.getElementById('myId')、document.querySelector('selectorHere') 或者如果使用 jQuery，则使用 $('selectorHere') 来获取对元素的引用。然后使用element.addEventListener('click', myFunction) 或jQuery 的$(element).click() 附加事件。

标签： html button

【解决方案1】：

演示 http://jsfiddle.net/f8Fd3/

这是带有您的代码:)的演示

@DownVoter，请解释一下？

OP 正如 m59 所说，它比内联点击更具传播性

请阅读本文 Why is using onClick() in HTML a bad practice?

另一个带有 lil diff 代码的演示：http://jsfiddle.net/6wwe2/

OP 休息，这应该适合您的需要！ :))

代码

<button onclick="javascript:myFunction()" class="btn btn-1 btn-1c">Credit Card</button>

【讨论】：

我没有投反对票，但我几乎会投反对票，因为你鼓励使用内联 js 而不是谴责它。
@m59 好点我会更新但是似乎他/她正在处理遗留代码，所以想在不打扰苹果购物车的情况下解决问题！ :))stackoverflow.com/questions/5871640/…
谢谢=D 也许有一天，我们再也不用看内联js了。
@m59 :)) 谢谢你！嘿，我希望布鲁夫！但只要我们重写每一段代码，它就会一直存在！ Big Ball Of Mud 自软件行业诞生以来，大多数大型系统的目的地都是 n00b 开发人员或坚定的开发人员，但我还太年轻，不能这么说:)

【解决方案2】：

试试这个，根据我对你的问题的理解

<button onclick="myFunction();" class="btn btn-1 btn-1c">

【讨论】：

【解决方案3】：

当使用 onclick 时，你必须像这样格式化函数：
<button onclick="myFunction()" class="btn btn-1 btn-1c">Credit Card</button>
在函数名称后加上括号。

【讨论】：

【解决方案4】：

在您的 JSFiddle 中，您在左侧的下拉列表中选择 no wrap (head)。选择 onLoad 时（默认情况下），您的函数在本地范围内定义。

在您的小提琴中，在左侧的下拉列表中选择 no wrap (head)，点击 Run 即可。

此外，您应该将 onclick 事件格式化为函数调用，例如myFunction() 不是 myFunction。

【讨论】：

【解决方案5】：

通过编写myFunction，您并没有执行函数，而是返回函数定义。要执行该功能，您应该附加()；

onclick='myFunction()'

起初这令人困惑，但当您开始深入研究回调时，这是有道理的。例如，当您为某物提供回调函数时；

success: mySuccessFunction,
error: myErrorFunction

等你不要放()，否则函数会在代码准备好时执行。相反，您提供函数定义，以便代码可以在需要时执行该函数。

【讨论】：

【解决方案6】：

如果您使用的是 jQuery：

$('.btn-1c').click(myFunction);

是最简单的实现。鉴于您提供的代码，我真的无法为您提供更多帮助，但有更好的方法。

【讨论】：

【解决方案7】：

HTML

<button class="btn btn-1 btn-1c">Credit Card</button>

jQuery

$(function() {
       $("button").click(function(){
              alert("Hello World!");
              return false;
        });
 )};

【讨论】：