JavaScript：window.onload問題

Java仗劍走天涯發表於2017-05-05
JavaScript

前幾天做一個點選按鈕，就實現切換圖片效果的小demo時，程式碼看上去沒問題，就是達不到效果。讓我百思不得其解。

程式碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <img src="img/1.png"/>
        <input type="button" id="btn" value="改變圖片" onclick="changePic()" />

    </body>

    <script type="text/javascript">
        window.onload=function(){
            //1.獲取img標籤
            var img=document.getElementsByTagName("img");
            //2.定義count來存對應圖片---圖片名字分別為1,2,3,4
            var count=2;
            //3.切換圖片函式
            function changePic(){
                if(count<4){
                    img[0].src="img/"+count+".png"; 
                    count++;
                }else if(count==4){
                    img[0].src="img/"+count+".png";
                    count=1;
                }
            }
        }

    </script>
</html>

一直以來，我們寫前端程式碼時，第一件事就是寫window.onload的呀！為什麼會出問題呢？

後來，上網去查，才得知是因為changePic（）放在window.onload中就變成了一個區域性函式了，不能實現在標籤中的直接呼叫。

去掉window.onload就可以使用了。

程式碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <img src="img/1.png"/>
        <input type="button" id="btn" value="改變圖片" onclick="changePic()" />

    </body>

    <script type="text/javascript">

        //1.獲取img標籤
        var img=document.getElementsByTagName("img");
        //2.定義count來存對應圖片---圖片名字分別為1,2,3,4
        var count=2;
        //3.切換圖片函式
        function changePic(){
            if(count<4){
                img[0].src="img/"+count+".png"; 
                count++;
            }else if(count==4){
                img[0].src="img/"+count+".png";
                count=1;
            }
        }       
    </script>
</html>

如果你非要用window.onload，就使用–物件.函式–的方法

程式碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <img src="img/1.png"/>
        <input type="button" id="btn" value="改變圖片" />

    </body>

    <script type="text/javascript">
        window.onload=function(){
            //1.獲取img標籤
            var img=document.getElementsByTagName("img");
            //2.定義count來存對應圖片---圖片名字分別為1,2,3,4
            var count=2;
            //3.切換圖片函式
            document.getElementById("btn").onclick=function(){
                if(count<4){
                    img[0].src="img/"+count+".png"; 
                    count++;
                }else if(count==4){
                    img[0].src="img/"+count+".png";
                    count=1;
                }
            }
        }
    </script>
</html>

相關文章