Uncaught TypeError無法設置null的屬性'src'

因此，在我的Chrome瀏覽器的new website中，我試圖使用setInterval函數每5秒切換一次圖像。這似乎工作，但是我有問題無法設置null的屬性src。Uncaught TypeError無法設置null的屬性'src'

var images = new Array(); 
images[0] = "/images/grilled-chicken-large.png"; 
images[1] = "/images/sizzly-steak.png"; 
var img = document.getElementById("img"); 

function changeImage() { 
    for (var i = 0; i < 3; i++) { 
     img.src = images[i]; 
     if (i == 2){i = i - 2;}; 
    } 
} 

window.onload=setInterval("changeImage()", 5000);

我知道的問題是，我試圖與IMG的ID來獲得元素完成頁面加載之前，我已經有了一個在window.onload，所以我不知道是什麼去做。另外，如果我創建一個包含setInterval和img變量的init（）函數，頁面將會凍結。

任何想法？

來源

2012-07-30 Ilan Biala

您只有'圖像[0]'和'圖像[1]'，但您正嘗試訪問'圖像[2]'。 – bfavaretto 2012-07-30 21:34:56

注意：不要將字符串傳遞給'setInterval'，它使用'eval'。傳遞函數：'setInterval（changeImage，5000）;'。另外，'window.onload = setInterval（changeImage，5000）;'不會做你認爲它的作用。 – 2012-07-30 21:39:53

只是意識到bfavaretto，謝謝。 Rocket，你的意思是把它作爲changeImage（）而不是「changeImage（）」傳遞給它？最後一行沒有做到我認爲的那樣意味着什麼？ – 2012-07-31 00:03:19

問題是你訪問一個只有兩個元素（0和1）的數組的元素2。

但腳本中還存在邏輯錯誤：您在哪裏存儲當前可見圖像的索引？您需要一個包含該索引的全局變量。

var currentIndex = 0; 
function changeImage() { 
    // Switch currentIndex in a loop 
    currentIndex++; 
    if (currentIndex >= images.length) 
     currentIndex = 0; 

    var img = document.getElementById("img"); 
    img.src = images[currentIndex]; 
} 

document.onload = function() { 
    setInterval(changeImage, 5000); 
}

我搬到了img可變進使得它在文檔加載時五秒後分配的功能。

只是爲了解決問題：JavaScript是一種基於事件的編程語言。這意味着幻燈片更改代碼在每次觸發間隔時執行，執行一些工作（切換到下一張幻燈片），然後完成，以便瀏覽器可以呈現頁面。如果循環遍歷幻燈片，則瀏覽器無法顯示新幻燈片，因爲腳本仍在幻燈片之間執行。解決辦法就是我發佈的內容：定義一個全局變量來代替循環變量，並在每次顯示下一張幻燈片時增加它。

來源

2012-07-30 21:34:57 Yogu

Yogu，如果我做了它（var i = 0，我 2012-07-31 00:04:43

Yogu，感謝您的幫助，我想出了一個不同的方式代碼，沒有for循環。 – 2012-07-31 00:43:15

隨時在我的網站查看 – 2012-07-31 01:52:53

你for for循環看起來很奇怪。嘗試循環：

function changeImage(){ 
    if(!img.attributes["index"]){img.attributes["index"]=0;return;}; 
    img.attributes["index"]++; 
    img.src=images[img.attributes["index"]]; 
} 
window.onload=function(){ 
    window.img=document.getElementById("img"); 
    setInterval("changeImage()",5000) 
}

應該工作。
您會注意到我將圖像索引存儲在圖像的屬性中，而不是全局變量。我認爲全球的速度稍快，但將其存儲在圖像意味着如果需要，您可以輕鬆地將其擴展到多個圖像。另外，與你的瀏覽器結冰的問題是，下面的代碼：

for(var i=0;i<3;i++){ 
    //Some more stuff 
    if(i==2){i-=2}; 
}

這個循環是無限的，因爲每當i達到2，i==2變爲真，這意味着迭代將重置i到0並啓動所有再次。防止這種情況的唯一方法是在某個地方使用break;，這是我沒有看到的任何地方。提示：篡改for循環中的索引變量通常是一個糟糕的主意。

來源

2012-07-30 21:36:58

我之所以這麼說，是因爲照片幻燈片顯示循環，因爲最終我會在那裏有25-30張照片，一旦達到25/30，或者在這個情況2，我希望它循環回到開頭。 – 2012-07-31 00:00:21

這裏：

window.onload = function() { 

    var images = [ 
     'http://placekitten.com/100/200', 
     'http://placekitten.com/200/100', 
    ]; 

    var img = document.getElementById('img'); 

    setInterval(function() { 
     img.src = img.src === images[0] ? images[1] : images[0]; 
    }, 1000); 

};

現場演示：http://jsfiddle.net/wkqpr/

如果有兩個以上的圖像，你可以這樣做：

window.onload = function() { 

    var images = [ 
     'http://placekitten.com/100/200', 
     'http://placekitten.com/200/100', 
     'http://placekitten.com/200/150', 
     'http://placekitten.com/150/300' 
    ]; 

    images.current = 0; 

    var img = document.getElementById('img'); 

    setInterval(function() { 
     img.src = images[ images.current++ ]; 
     if (images.current === images.length) images.current = 0;  
    }, 1000); 

};

現場演示：http://jsfiddle.net/wkqpr/1/

來源

2012-07-30 21:38:32

爲什麼在最後一條if語句中使用「===」？ – 2012-07-31 00:05:45

@IlanBiala如果計數器等於數組長度，這意味着我必須重置計數器。 – 2012-07-31 01:02:22

但不會==足夠？ – 2012-07-31 01:54:58

function changeImage() 
{ 
    for (var i = 0; i < 2; i++) 
    { 
     img.src = images[i]; 
    } 
} 


window.onload=function() 
{ 
    setInterval(changeImage,5000); 
}

你的最後一行的for循環是完全無用的，只是複雜的事情，此外，你設置窗口onload事件的方式是不標準！

編輯：src屬性爲空，因爲很明顯，您的數組大小隻有2！

來源

2012-07-30 21:53:30 spaceman12

Uncaught TypeError無法設置null的屬性'src'

回答

相關問題