将函数的点击事件设置为按钮

Question

我有一个按钮，我想为其分配一个点击事件，这样当我点击该按钮时，它将运行函数。

<button id="buttonid"></button>

当我运行下面的脚本会触发该功能，但不会给按钮添加点击事件。所以我无法使用按钮触发功能。

function myFunction() {
  alert("Hello, world!");
}

var element = document.getElementById("buttonid");
element.onclick = myFunction;

我相信我的目标是这样的：

<button id="buttonid" onClick="myFunction()">

Answer 1

试试这个：

function myFunction(e) {
  alert("Hello, world!");
  console.log(e);
}

<button id="buttonid" onclick="myFunction(event)">Click me</button>

如果你想从 js 代码添加事件处理程序，那么应该包含该代码 blow your html with button.

Answer 2

您的初始代码应该可以工作，前提是它是运行在 DOM 准备就绪之后，以便 document.getElementById("buttonid"); 实际找到元素。

检查您的控制台是否存在可能表明 element 是 undefined 的错误。

确保将包含您的代码的 script 标签移动到底部（在关闭 body 标签 之前）

在上述之后，更好的方法是不设置 onclick 属性，而是使用 addEventListener 方法。

<body>

  <button id="buttonid">clickme</button>

  <script>
    function myFunction() {
      alert("Hello, world!");
    }

    var element = document.getElementById("buttonid");
    element.addEventListener('click', myFunction);
  </script>
</body>

将函数的点击事件设置为按钮

Set click event for function to button

javascript

function

buttonclick