Javascript陣列未定義

我不斷收到錯誤links[i] is undefined。
我明確定義它，但它不斷給我這個錯誤 - 任何想法？Javascript陣列未定義

我想在我有5個鏈接做不顯眼的圖像rolovers。

function loadImages(){ 
    path = 'uploads/Splash-4/nav/'; 
    links = new Array(); 

    for (i=1;i<=5;i++){ 
     var id = "link-"+i; 
     var defaultState = '<img src="' +path+i+'.jpg" border="0" />'; 
     links[i] = document.getElementById(id); 

     // Place all image linksinto anchor 
     links[i].innerHTML = defaultState; 

     // What to do on mouseover 
     links[i].onmouseover = function() { 
      links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />'; 
     } 
     // What to do on mouse oUt 
     links[i].onmouseout = function() { 
      links[i].innerHTML = defaultState; 
     } 
    } 
} 
window.onload = loadImages;

HTML：

<a href="?page=Profile" id="link-1"></a> 
<a href="?page=for-sale" id="link-2"></a><br /> 
<a href="?page=testimonials" id="link-3"></a><br /> 
<a href="?page=free-home-appraisal" id="link-4" /></a><br /> 
<a href="?page=contact-me" id="link-5"></a><br />

來源

2010-08-30 Andre

什麼行會給你這個錯誤？（使用Chrome的開發者控制檯或螢火蟲） – 2010-08-30 14:30:31

當我做mousover它給我錯誤：它抱怨這條線：鏈接[我]。innerHTML =''; – Andre 2010-08-30 14:32:40

使用[]而不是「new Array（）」實例化一個空數組更清晰。 – Robusto 2010-08-30 14:33:41

問題是，當您的onmouseover()函數被調用時，變量i = 6因爲您上次迭代產生i = 6，導致循環結束。因此，您必須在某處保護i。例如：

function loadImages(){ 
    path = 'uploads/Splash-4/nav/'; 
    var links = []; 

    for (i=1;i<=5;i++){ 
     (function(j) { 
      var id = "link-"+j; 
      var defaultState = '<img src="' +path+j+'.jpg" border="0" />'; 
      links[j] = document.getElementById(id); 

      // Place all image linksinto anchor 
      links[j].innerHTML = defaultState; 

      // What to do on mouseover 
      links[j].onmouseover = function() { 
       links[j].innerHTML = '<img src="' +path+j+'a.jpg" border="0" />'; 
      } 
      // What to do on mouse oUt 
      links[j].onmouseout = function() { 
       links[j].innerHTML = defaultState; 
      } 
     })(i); // call the anonymous function with i, thus protecting it's value for 
       // the mouseover/mouseout 

    } 
}

來源

2010-08-30 14:36:19

雖然這是真的（順便說一下，關閉的例子很好），但它並不會導致OP所具有的「未定義」問題。他使用'for（）'循環，就好像Array有一個基於1的索引。 – user113716 2010-08-30 14:56:49

這幾乎可以工作，但仍然有一些事情沒有正確執行，這似乎與迭代混在一起，也許這樣做並不是最好的......見這裏http：//generic.webeasy .com.au/index.php？page = sub-page – Andre 2010-08-30 15:00:36

@patrick dw，謝謝。即使OP使用1作爲基礎索引，它在這裏也不會有任何區別，但是如果他爲（i = 0; i <鏈接長度; i ++）{鏈接[i] ...} ... @Andre，mouseover/mouseout確實看起來很尷尬，但由於我不確定最終的結果是什麼，所以我想保持簡單，只是試圖解決這個問題。海事組織，我會使用.hover（） – 2010-08-30 20:35:42

您的代碼段不包括可變連桿的聲明。如果你還沒有在其他地方定義它（即，如果它是一個局部變量），你需要在這裏做它：

而不是

links = new Array();

你可以做

var links = new Array();

一個例子可以發現here。

如果你在其他地方宣佈它，可能是因爲此行

document.getElementById(id);

被返回null。

來源

2010-08-30 14:30:25 Andy

JavaScript中允許聲明不帶'var'關鍵字的變量。這僅僅意味着你在全球化。 *不使用全局變量是一個好習慣，但在這種情況下它不會導致'undefined'。 – user113716 2010-08-30 14:51:12

你是對的。我其實不知道......不這樣做導致了我過去的問題，並且在重構（包括顯式聲明變量）之後，我的代碼起作用了，所以我認爲這是一個問題。感謝您將此引入到像我這樣認爲的其他人的注意力中。 – Andy 2010-08-30 15:02:55

是的，它幾乎總是最好使用'var'。絕對是一個重要的標準做法。 – user113716 2010-08-30 15:58:20

首先，你應該說：

var links = [];

它一般不提倡使用Array構造本身，不指定var，你正在做的links變量駐留在全球空間，這通常是不好的。

現在，至於你的實際問題。

你的事件處理程序從外部範圍揹着參考path和i變量，但他們實際遇到的時候，變量i具有價值6 - 你打算在所有的不算什麼！爲了解決這個問題，您可以更改：

// What to do on mouseover 
    links[i].onmouseover = function() { 
     links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />'; 
    } 
    // What to do on mouse oUt 
    links[i].onmouseout = function() { 
     links[i].innerHTML = defaultState; 
    }

到

// What to do on mouseover 
    links[i].onmouseover = (function(path, i) { 
     return function() { 
      links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />'; 
     }; 
    })(path, i); 
    // What to do on mouseout 
    links[i].onmouseout = (function(i) { 
     return function() { 
      links[i].innerHTML = defaultState; 
     } 
    })(i);

這將創建一個新的閉包抱着你想要捕捉的變量。這樣i的內部仍然可以，哦，3，而外部的i去6。

來源

2010-08-30 14:37:24

Javascript陣列未定義

回答

相關問題