使用Javascript - 遺漏的類型錯誤：無法讀取的不確定

我一直在敲打我的頭靠在牆上，似乎無法找到解決辦法，檢查其他職位有相同的警告，並沒有回答幫助財產「SRC」 /可我的問題適用。基本上很多小圖片和一個我點擊也變得在另一個地方大。使用Javascript - 遺漏的類型錯誤：無法讀取的不確定

錯誤是在第53行，又名最後一行。

var images = new Array(); 

var imageThumbs = [ 
      {"src": "images/img01thumb.jpg", "alt":"City of DU", "title":"City"}, 
      {"src": "images/img02thumb.jpg", "alt":"Some txt", "title":"Some txt"}, 
      {"src": "images/img03thumb.jpg", "alt":"City of DU", "title":"City"}, 
]; 

var bigImgHolder = document.createElement("div"); 
bigImgHolder.setAttribute("id", "bigImgHolder"); 
document.body.appendChild(bigImgHolder); 

var elem = document.createElement("img"); 
elem.setAttribute("src", "images/img01.jpg"); 
elem.setAttribute("alt", "Big Picture!"); 
elem.setAttribute("id", "bigImg"); 
document.getElementById("bigImgHolder").appendChild(elem); 

var imgHolder = document.createElement("div"); 
imgHolder.setAttribute("id", "imgHolder"); 
document.body.appendChild(imgHolder); 

var elem2; 

for(var i = 0; i<imageThumbs.length; i++) { 
    elem2 = document.createElement("img"); 
    elem2.setAttribute("src", imageThumbs[i].src); 
    elem2.setAttribute("alt", imageThumbs[i].alt); 
    elem2.setAttribute("class", "thumb"); 
    elem2.addEventListener("click", function(){ 
     changeMe(i+1); 
    }) 
    document.getElementById("imgHolder").appendChild(elem2); 
} 


function preload() { 
    var path = "images/"; 
    for (var i = 1; i <= imageThumbs.length; i++) { 
     images[i] = new Image(); 
     if(i<10){ 
      images[i].src = path + "img0" + i + ".jpg"; 
     } 
     else{ 
      images[i].src = path + "img" + i + ".jpg"; 
     } 
     window.alert("image " + i + " loaded"); 
    } 

} 

//swap images 
function changeMe(index) { 
    document.getElementById('bigImg').src = images[index].src; 
}

來源

2015-10-04 Kek Eke

哪裏是changeMe功能？ – Sagi

'i'是不是你想要當事件實際發生它是什麼....這將是最大的，因爲'for'循環將是長期的結束，完成，沒有索引匹配'我在+ 1' 。在'的document.getElementById（ 'bigImg'）SRC =圖像[索引]的.src陣列 – charlietfl

變化'images'的端;''到imageThumbs'。或者你可能忘了調用'preload'函數。 –

使用changeMe功能參數是這樣的：

function changeMe(index) { 
    document.getElementById('bigImg').src = images[index-1].src; 
}

這背後的原因是，你可能會超出範圍，通過發送i+1，其中i範圍0和images.length - 1之間，但是當i + 1發生時，它成爲images.length，它給你undefined。

來源

2015-10-04 21:27:04

索引爲零時，這也會失敗 – charlietfl

您需要解決2個問題，對於i封閉，也沒有走過去陣列的年底和年初開始回：

嘗試：

for (var i = 0; i < imageThumbs.length; i++) { 
    // create closure using IIFE 
    (function (i) { 
     elem2 = document.createElement("img"); 
     elem2.setAttribute("src", imageThumbs[i].src); 
     elem2.setAttribute("alt", imageThumbs[i].alt); 
     elem2.setAttribute("class", "thumb"); 
     // make sure we don't overshoot array length 
     var next = i + 1 < imageThumbs.length ? i + 1 : 0; 
     elem2.addEventListener("click", function() { 
      changeMe(next); 
     }); 

     document.getElementById("imgHolder").appendChild(elem2); 

    })(i); 
}

來源

2015-10-04 21:57:55 charlietfl

使用Javascript - 遺漏的類型錯誤：無法讀取的不確定

回答

相關問題