JavaScript getElementByID()不工作[重复]
-
11-09-2019 - |
题
这个问题已经有一个答案在这里:
为什么 refButton
获得 null
在以下JavaScript code?
<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 在结束的身体标记。
它没有找到它,因为它不在DOM呢!
你也可以把它在加载事件处理程序是这样的:
window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
alert( 'I am clicked!' );
}
}
因为当的脚本执行浏览器尚未分析 <body>
, ,因此它不知道,有一个元素的指定标识。
试试这个代替:
<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 = ...
使这一职能只执行之后,整个文件已进行分析。
不隶属于 StackOverflow