下面是我的按钮代码和一个在单击该按钮时发出警报的函数。当我加载页面时,它会发出警报,但在我单击按钮时不会发出警报。这段代码有什么问题?
<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;
此外,您必须将脚本块移动到标记下方,否则当您尝试向其添加单击处理程序时,该按钮将不存在。