点击事件报错: Cannot set properties of null (setting 'onclick')

1、正常书写代码如下：

通过外部引用JS文件实现想要的效果时报错，以下是代码的展示。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

在头部引入js文件 <script type="text/javascript" src="./win.js"></script>   HTML代码文件如下：   <div class="cl">       <div id="mask">         “冲出迷雾走向光明，最强大的力量是同心合力，最有效的方法是和衷共济。       </div>       <span id="close">X</span>    </div>   JS代码文件如下： let mask = document.getElementById("mask"); let close = document.getElementById("close"); let cl = document.getElementsByClassName("cl")[0]; close.onclick = function () {   mask.style.visibility = "hidden";   cl.style.visibility = "hidden";   document.documentElement.style.overflow = "scroll"; };

2、出现报错信息：win.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onclick')

 3、解决办法

?

1 2 3 4

（1）将JS引入放在底部加载   （2）将所有JS代码放在里面执行  window.onload = function () {}

4、总结原因

当JS文件放在head里面时，如果绑定了onclick或者onmouseover事件，就会出现如上图类似的错误，是因为浏览器的加载你写的html文档的顺序是从上往下，加载完元素节点才执行的JS，所以当浏览器自顶向下解析时，找不到onclick绑定的元素节点，于是报错。