为什么会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>
3 回答
慕婉清6462132
TA贡献1804条经验 获得超2个赞
此时，您正在调用函数，页面的其余部分尚未呈现，因此该元素当时不存在。尝试调用您的函数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>
Cats萌萌
TA贡献1805条经验 获得超9个赞
您需要将JavaScript 放在body标签的末尾。
它找不到它，因为它不在DOM中！
您也可以将其包装在onload事件处理程序中，如下所示：
window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
alert( 'I am clicked!' );
}
}
慕容708150
TA贡献1831条经验 获得超4个赞
因为执行脚本时浏览器尚未解析<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 = ...使该函数仅在整个文档被解析后才执行。
添加回答
举报
0/150
提交
取消