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

1、正常书写代码如下：

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

在头部引入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）将JS引入放在底部加载

（2）将所有JS代码放在里面执行
 window.onload = function () {}

4、总结原因

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