我正在尝试抓取一个元素(一个按钮)并在其上添加一个事件监听器。 每当我跑
var button = document.getElementById('clickMe');
console.log(button); // null
我检查了我的javascript文件正在加载并检查所有内容都区分大小写。这是我的html和JS文件:
HTML:
<!doctype html>
<html>
<head>
<script src="js/timer.js"></script>
</head>
<body>
<button id='clickMe' type='button'>Hello</button>
</body>
</html>
JS
var button = document.getElementById('clickMe');
console.log(button);
function buttonClicked () {
alert('the button was clicked');
}
button.addEventListener('click', buttonClicked);
function timerComplete () {
alert('timer complete');
}
setTimeout(timerComplete, 2000);
我发现的最常见的错误是我做过的骆驼套管getelementbyid。
有谁知道为什么我一直变空?它是否试图在加载元素之前抓取它?
答案 0 :(得分:2)
在将Button添加到DOM之前执行您的Javascript代码。您可以将HTML更改为:
<!doctype html>
<html>
<body>
<button id='clickMe' type='button'>Hello</button>
<script src="js/timer.js"></script>
</body>
</html>
或者甚至更好,如果你不介意让你的JS代码更复杂,你可以等待你的dom元素在执行代码部分之前加载:
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('clickMe');
console.log(button);
});
如果您使用此JS,则可以将脚本标记放回头部