JS代码报错:Uncaught TypeError: Cannot set property 'onclick' of null

在写JS代码中的绑定事件时(将JS与HTML标签分开时),发现会有如下错误提示:

Uncaught TypeError: Cannot set property 'onclick' of null

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			document.getElementById("btn").onclick=function(){
				document.getElementById("p1").innerHTML="慢慢来!";
			}
		</script>
	</head>
	<body>
		<p id="p1">我叫小芳芳,今天我有认真学习哦!</p>
		<input type="button" id="btn" value="click me!">
	</body>
</html>

对此有两个解决的办法

1.将JS标签放到<input>标签下方

2.将代码修改为:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload=function(){
			document.getElementById("btn").onclick=function(){
				document.getElementById("p1").innerHTML="慢慢来!";
			}				
			}

		</script>
	</head>
	<body>
		<p id="p1">我叫小芳芳,今天我有认真学习哦!</p>
		<input type="button" id="btn" value="click me!">
	</body>
</html>

这是因为浏览器在获取到服务器返回的代码时是按照顺序执行的,所以如果html的dom树还没有完全生成,你执行js的时候,就会出现无法读取到某些元素的情况,这样js代码也就无法执行了!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章