1.js点击事件的时候浏览器报错,提示Uncaught TypeError: Cannot set property 'onclick' of null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var btn = document.getElementById('btn')
btn.onclick = function(){
alert('我被点了')
}
</script>
</head>
<body>
<button id='btn'>点击事件</button>
</body>
</html>
2.、解决办法
①当把js代码放在head里面的话,点击按钮,报错js.html:8 Uncaught TypeError: Cannot set property ‘onclick’ of null*②放在头部的解决方法把 js代码放在window.οnlοad=function(){…………..}}里面即可解决,window.onload表示页面加载完成后执行的函数,这样JS代码即使放在中也可以完美实现效果。③把js放在点击事件下面也不会报错。
3、原因:js按照页面自上而下的顺序说明的,先加载完按钮节点才执行的JS的点击事件才不会报错
页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记
页面是从上往下加载的,当他执行到事件的时候,会发现没有dom事件,所以会报错。
解决的办法是把事件写在dom元素的下面,或者用window.onload()=>{事件},
因为window.onload是等页面的所有内容都加载完毕之后才会执行。