Question

单击按钮后调用 javascript

2017-03-22

4307

javascript html

我需要在按下按钮类型为按钮后调用 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，它没有错误，但是它没有警报..

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

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

上面 js 的错误是：未捕获的类型错误：无法在 HTMLDocument 上设置 null 的属性“onclick”。

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

最后一个错误是：

Uncaught TypeError: Cannot set property 'onclick' of null
at window.onload

Answer 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>

Answer 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。

Answer 3

以下是完整示例：使用按钮类型创建按钮，并绑定 onclick 函数。 <button type="button" onclick="onClickHandler()">点击我！</button>

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