JS事件报错之“Cannot set property ‘onclick’ of null”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
var btn1 = document.getElementById('btn1');
var demo1 = document.getElementById('demo1');
// onclick事件
btn1.onclick = function () {
demo1.innerHTML = 'hello world!';
}
</script>
</head>
<body>
<button id="btn1">点我</button>
<p id="demo1"></p>
</body>
</html>
执行上面代码，会报如下错误：
将js代码放底部加载后，就能正常运行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<button id="btn1">点我</button>
<p id="demo1"></p>
<script>
var btn1 = document.getElementById('btn1');
var demo1 = document.getElementById('demo1');
// onclick事件
btn1.onclick = function () {
demo1.innerHTML = 'hello world!';
}
</script>
</body>
</html>
分析原因：
当js代码或js文件放在head之间时，如果绑定了onclick或onmouseover等事件时，控制台就会报如上图类似的错误。是因为浏览器加载html文档顺序是自上而下的，加载完按钮结点才执行js代码。浏览器自顶向下解析时，找不到onclick绑定的按钮结点，于是报错。
解决办法：
- 将js代码或js外部文件放在底部加载
- 使用window.onload = function () {}包裹js内容