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绑定的元素节点,于是报错。
标签:style,set,代码,JS,setting,报错,onclick,document From: https://www.cnblogs.com/wanker/p/18155694