在写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代码也就无法执行了!