为什么refButton会null出现在下面的 JavaScript 代码中？
<html>
<head>
<title></title>
<script type="text/javascript">
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
alert('I am clicked!');
};
</script>
</head>
<body>
<form id="form1">
<div>
<input id="btnButton" type="button" value="Click me"/>
</div>
</form>
</body>
</html>
在您调用函数时，页面的其余部分尚未呈现，因此该元素此时不存在。尝试调用您的函数window.onload。像这样的东西：
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
alert('I am clicked!');
}
};
</script>
</head>
<body>
<form id="form1">
<div>
<input id="btnButton" type="button" value="Click me"/>
</div>
</form>
</body>
</html>
您需要将 JavaScript放在 body 标签的末尾。
它没有找到它，因为它还不在 DOM 中！
您还可以将其包装在 onload 事件处理程序中，如下所示：
window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
alert( 'I am clicked!' );
}
}
因为脚本执行的时候浏览器还没有解析<body>，所以不知道有指定id的元素。
试试这个：
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = (function () {
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
alert('Dhoor shala!');
};
});
</script>
</head>
<body>
<form id="form1">
<div>
<input id="btnButton" type="button" value="Click me"/>
</div>
</form>
</body>
</html>
请注意，您也可以使用addEventListener而不是window.onload = ...使该函数仅在整个文档被解析后才执行。