单击按钮后调用javascript答案

【问题标题】：Call a javascrtipt after button click单击按钮后调用javascript
【发布时间】：2017-08-14 00:09:43
【问题描述】：

按下带有类型按钮的按钮后，我需要调用 javascript。

<button type='button' 
        class='btn btn-sm btn-primary pull-right m-t-n-xs' 
        style='width: 100%;' id='demo' onclick='demo();'>
          <strong>Edit</strong>
</button>

我已经尝试了下面的 javascript，但它们有错误

 $('#demo').click(function() {
     alert('hey');
 });

对于上面的Js，没有报错但是没有alert..

document.getElementById("demo").onclick = function() { myFunction() };

function myFunction() {
    alert('hey');
}

上面js的错误是：Uncaught TypeError: Cannot set property 'onclick' of null at HTMLDocument.

window.onload = function() {
   document.getElementById("demo").onclick=function() {
     alert("Hello WOrld");
    }
}

最后一个错误是：Uncaught TypeError: Cannot set property 'onclick' of null 在window.onload

【问题讨论】：

您需要一个名为 demo 的函数（您的 js 部分目前缺少该函数）
读取你的html标签，你设置onclick='demo();'的部分
可能也相关：stackoverflow.com/questions/20021628/…
要获得更好的帮助，请点击帖子下方的编辑链接，并附上您看到的确切错误消息。
@Paul，我把错误信息放在那里..

标签： javascript htmlbutton

【解决方案1】：

$('#demo').click(function() {
     console.log('hey');
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class='btn btn-sm btn-primary pull-right m-t-n-xs' style='width: 100%;' id='demo'>
          <strong>Edit</strong>
</button>

【讨论】：

这适用于我所有的浏览器。 @Domy：您确定不是在文档准备就绪后动态添加按钮吗？

【解决方案2】：

我已经删除了代码中不相关的部分以简化答案。这是一个更简单的 HTML：

<button id="demo">Edit</button>

请注意，您不应在 onclick 属性中包含 JavaScript。那是老派，只会让你的生活更加悲惨。

这里是一些示例 JavaScript：

window.onload=function() {
    var button=document.querySelector('button#demo');
    button.onclick=doit;
}

function doit() {
    alert('clicked');
}

这种事情你当然不需要 jQuery。

对于它的价值，您可能也不应该使用 style 属性 - 这就是 class 属性的用途。也不要在按钮内使用strong。它在语义上是不正确的，如果您想将文本加粗，请在按钮本身上使用 CSS。

【讨论】：

还是不行..可能是因为按钮类型是按钮？
还是不行..可能是因为按钮类型是按钮？
不，你是对的——我打错了几个字。 button 元素中的 id 错误，JavaScript 中的字符串不匹配。为了清楚起见，我还更改了函数的名称。

【解决方案3】：

下面是完整的例子：按钮是使用按钮类型创建的，并且绑定了 onclick 功能。 <button type="button" onclick="onClickHandler()">Click Me!</button>

`<script>
    // This function gets triggered when button is clicked.
    function onClickHandler(){
        alert("JS rocks");
    }
</script>`

【讨论】：

请考虑添加一些解释为什么这个代码 sn-p 回答了这个问题。