瀏覽器出現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);
    }
}