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

Part1:

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

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

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

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

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

 <script>
             window.onload = function(){
                 var mainSlider  = document.getElementsByClassName("mian-slider")[0];
                 var aaa = mainSlider.children[0];
                 var ul = mainSlider.children[1];
                 var arrow = mainSlider.lastChild || mainSlider.lastElementChild;
                 var imgWidth  = mainSlider.offsetWidth;

             }
         </script>
         <div class="main-slider">
             <a id="aaa">
                 <img src="data:images/slide.jpg" alt="">
                 <img src="data:images/slide1.jpg" alt="">
                 <img src="data:images/slide2.jpg" alt="">
                 <img src="data:images/slide3.jpg" alt="">
                 <img src="data:images/slide4.jpg" alt="">
                 <img src="data:images/slide5.jpg" alt="">
             </a>
             <ul>
              <li></li>
             </ul>
             <div class="arrow">
                 <a class="arrow-l" href="javascript:void(0)"><</a>
                 <a class="arrow-r" href="javascript:;">></a>
             </div>
         </div>

Part2:

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

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

Part3:

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

 window.onload=function(){
 var o=document.getElementById('infozone');
 window.setInterval(function(){scrollup(o,20,0);},3000);
 }

 window.onload = function(){
 var $ = function($){
 return document.getElementById($);
 };

 window.onload = function(){
 var $1 = function($1){
 return document.getElementById($1);
 };

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

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

[解决]：

 window.onload=function(){
     var o=document.getElementById('infozone');
     window.setInterval(function(){scrollup(o,20,0);},3000);

     var $ = function($){
         return document.getElementById($);
     }
     var $1 = function($1){
         return document.getElementById($1);
     }
 }