与 HTML 中的按钮关联的功能 - 未按预期工作

Associated functionality with a button in HTML - Not working as intended

本文关键字：工作 功能 HTML 按钮 关联      更新时间：2023-09-26

下面是我的按钮代码和一个在单击该按钮时发出警报的函数。当我加载页面时，它会发出警报，但在我单击按钮时不会发出警报。这段代码有什么问题？

<html>
<head>
<script type="text/javascript">
b1 = document.getElementById("b0");
b1.onclick = message();
function message() {
 alert("You clicked a button");
}
</script>
</head>
<body>
<h1>Checking button functionality!</h1>
<button id="b0">Click me</button>
</body>
</html>

您的脚本可能会在b1上引发未定义的错误，因为在您搜索 id 为 b0 的元素时未加载 DOM。

您需要更新脚本以在load事件中查询 DOM，或者将其移动到您获得的元素之后。通常的做法是将脚本放在结束</body>标记之前。

例如

<head>
<script>
  function message() {
    alert("You clicked a button");
  };
  window.onload = function() {
    b1 = document.getElementById('b0');
    b1.onclick = message;
  };
</script>
</head>
...

另请注意，我省略了onclick作业中的括号。您希望将函数分配给事件，而不是调用函数然后分配它。

您需要

将脚本移动到按钮下方（最好在</body>之前）并更改

b1.onclick = message();

自

b1.onclick = message;

否则，您不分配函数，而是返回值。

甚至更好：（见这里）

b1.addEventListener('click', message);

您已经在执行函数并将其返回值分配给 onclick 事件而不是函数引用本身。去掉括号： b1.onclick = message;

此外，您必须将脚本块移动到标记下方，否则当您尝试向其添加单击处理程序时，该按钮将不存在。

相关文章：