浏览器出现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="images/slide.jpg" alt="">
                <img src="images/slide1.jpg" alt="">
                <img src="images/slide2.jpg" alt="">
                <img src="images/slide3.jpg" alt="">
                <img src="images/slide4.jpg" alt="">
                <img src="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);
    }
}