浏览器出现Cannot set property 'onclick' of null的问题

Posted 2020-10-17 Lay-Buddhist

Part1:

当js文件放在head里面时，如果绑定了onclick事件，就会出现这样的错误，

是因为W3School的写法是浏览器先加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。

【1】因此，需要把js文件放在底部加载，就会避免该问题。

【2】在js代码外包一个window.onload = function(){} 即可解决问题

　代码如下：[注]：这里的代码只作为演示代码

 1 <script>
 2             window.onload = function(){
 3                 var mainSlider  = document.getElementsByClassName("mian-slider")[0];
 4                 var aaa = mainSlider.children[0];
 5                 var ul = mainSlider.children[1];
 6                 var arrow = mainSlider.lastChild || mainSlider.lastElementChild;
 7                 var imgWidth  = mainSlider.offsetWidth;
 8 
 9 
10 
11                 
12 
13 
14             }
15         </script>
16         <div class="main-slider">
17             <a id="aaa">
18                 <img src="images/slide.jpg" >
19                 <img src="images/slide1.jpg" >
20                 <img src="images/slide2.jpg" >
21                 <img src="images/slide3.jpg" >
22                 <img src="images/slide4.jpg" >
23                 <img src="images/slide5.jpg" >
24             </a>
25             <ul>
26              <li></li>
27             </ul>
28             <div class="arrow">
29                 <a class="arrow-l" href="javascript:void(0)"><</a>
30                 <a class="arrow-r" href="javascript:;">></a>
31             </div>
32         </div>

View Code

Part2:

那么问题来了window.onload = function(){}又是什么呢？

window.onload 的意思就是页面全部加载完成之后做一些事情，甚至包括图片。

Part3:

那么如果这个问题该怎么解决呢？

 1 window.onload=function(){
 2 var o=document.getElementById(‘infozone‘);
 3 window.setInterval(function(){scrollup(o,20,0);},3000);
 4 }
 5 
 6 window.onload = function(){
 7 var $ = function($){
 8 return document.getElementById($);
 9 };
10 
11 window.onload = function(){
12 var $1 = function($1){
13 return document.getElementById($1);
14 };

[问题]：页面只执行一个事件,另外两个不执行.

我们应该怎么改写能让这三个onload()都能加载到页面中?

[解决]：

 1 window.onload=function(){
 2     var o=document.getElementById(‘infozone‘);
 3     window.setInterval(function(){scrollup(o,20,0);},3000);
 4 
 5 
 6     var $ = function($){
 7         return document.getElementById($);
 8     }
 9     var $1 = function($1){
10         return document.getElementById($1);
11     }
12 }