触发JS事件报错“Cannot set property 'onclick' of null”

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事件报错“Cannot set property 'onclick' of null”
将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绑定的按钮结点,于是报错。

解决办法:

  1. 将js代码或js外部文件放在底部加载
  2. 使用window.onload = function () {}包裹js内容
上一篇:js


下一篇:Andorid 多线程(三):Handler 消息传递机制