use*_*312 29 javascript getelementbyid
为什么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>
jay*_*won 61
在您调用函数时,页面的其余部分未呈现,因此该元素不存在.尝试调用你的函数吧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>
Jac*_*kin 11
您需要将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 = ...使该函数仅在解析整个文档后才执行。