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

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

javascript html

Javascript 与HTML中的按钮关联的功能-未按预期工作,javascript,html,Javascript,Html,下面是我的一个按钮代码和一个在点击该按钮时发出警报的函数。它会在我加载页面时发出警报，但在我单击按钮时不会发出警报。这个代码有什么问题 <html> <head> <script type="text/javascript"> b1 = document.getElementById("b0"); b1.onclick = message(); function message() { alert("You clicked a button"); } &l

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

<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=document.getElementById（“b0”）；
b1.onclick=message（）；
函数消息（）{
警报（“您单击了一个按钮”）；
}
检查按钮功能！
点击我

您的脚本可能会在

b1

上抛出一个未定义的错误，因为在您搜索id为

b0

的元素时没有加载DOM

您需要更新脚本以在

load

事件中查询DOM，或者将其移动到获取的元素之后。通常的做法是将脚本放在结束标记之前

例如


函数消息（）{
警报（“您单击了一个按钮”）；
};
window.onload=函数（）{
b1=document.getElementById（'b0'）；
b1.onclick=消息；
};
...

还要注意，我省略了

onclick

赋值中的括号。您希望将函数分配给事件，而不是调用函数，然后再分配它。

您需要将脚本移动到按钮下方（最好在

之前）并进行更改

b1.onclick = message();

到

否则，不指定函数，而是指定其返回值

或者更好：（见）

您已经在执行函数并将其返回值分配给onclick事件，而不是函数引用本身。拆下支架：

b1.onclick=消息
此外，必须将脚本块移动到标记下方，否则在尝试向其添加单击处理程序时，该按钮将不存在 谢谢你，康纳姆！由于Quantastical的答案比这更具解释性，我将其标记为答案，但我也投票支持你的答案。谢谢！你在回答中提到了一个很好的参考，但Quantastical的回答更准确。投票赞成你的答案。
b1.onclick = message();

b1.onclick = message;

b1.addEventListener('click', message);