TypeError：'undefined'不是一個對象（評估'arrayImg [img] .style'）

我想寫一個顯示隱藏圖像的JavaScript程序。TypeError：'undefined'不是一個對象（評估'arrayImg [img] .style'）

這裏的HTML部分：

<!DOCTYPE html> 
<html> 
     <head> 
       <meta charset="utf-8" /> 
       <title> Exercice 3 </title> 
       <link rel="stylesheet" href="style.css" /> 
     </head> 
     <body> 
       <header> 
       </header> 
       <section> 
         <article> 
           <figure> 
             <img src="images/powsoundeffect.png" alt="image" /> 
             <figcaption> 
               Image 1 
             </figcaption> 
           </figure> 
           <figure> 
             <img src="images/thwack_soundeffect.png" alt="image" /> 
             <figcaption> 
               Image 2 
             </figcaption> 
           </figure> 
           <figure> 
             <img src="images/tophat.png" alt="image" /> 
             <figcaption> 
               Image 3 
             </figcaption> 
           </figure> 
           <figure> 
             <img src="images/1311511622.png" alt="image" /> 
             <figcaption> 
               Image 4 
             </figcaption> 
           </figure> 
           <ul> 
             <li> 
               <a href="#"> Image 1 </a> 
             </li> 
             <li> 
               <a href="#"> Image 2 </a> 
             </li> 
             <li> 
               <a href="#"> Image 2 </a> 
             </li> 
             <li> 
               <a href="#"> Image 2 </a> 
             </li> 
           </ul> 
         </article> 
       </section> 
       <script type="text/Javascript" src="script.js" > 
       </script> 
     </body> 
</html>

的CSS：

figure { 
     width: 20%; 
     position: absolute; 
     visibility: hidden; 
} 

ul li { 
     border: 1px solid black; 
     width: 10%; 
}

腳本：

var arrayA = document.querySelectorAll('a'); 
var arrayImg = document.querySelectorAll('figure'); 

function show_Image(text, img) { 
     text.style.fontSize = '2em'; 
     arrayImg[img].style.visibility = 'visible'; 
} 

for (var i = 0, c = arrayA.length; i < c; i++) { 
     arrayA[i].addEventListener('mouseover', function(e) { 
                 show_Image(e.target, i); 
               }, 
               false); 
}

當我嘗試運行Safari瀏覽器會出現以下錯誤的腳本：

TypeError: 'undefined' is not an object (evaluating 'arrayImg[img].style')

和鉻：

Uncaught TypeError: Cannot read property 'style' of undefined

看來，arrayImg不包含與querySelector對象，我不明白爲什麼...... 任何人都可以幫我在這？

謝謝！

來源

2014-04-15 obatard

可能重複[Javascript閉合內部循環 - 簡單實用的例子]（http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example） –

問題是在'我'和'addEventListener（）'的異步特性。當「i」被分配給一個超出範圍的值時，事件將發生，並在循環結束後調用'show_Image（e.targer，i）'。 –

謝謝你的回答，我明白了。你有一些建議讓程序起作用，我很困惑嗎？對不起，我是一個Javascript初學者。 – obatard

正如Jonathan Lonowski在其評論中所描述的那樣，變量'i'在eventListener被綁定之後增加 - 並且匿名函數將使用增加的值。

您可能會走這條路：

for (var i = 0, c = arrayImg.length; i < c; i++) { 
    arrayA[i].addEventListener('mouseover', (function(i,e) { 
     show_Image(e.target, i); 
    }).bind(this,i), false); 
}

它結合了匿名函數來從執行和「我」作爲第一個參數綁定的範圍，這不會改變了。

即使這不是最簡單的方法來實現你想要做的事情，它仍然以你想要的方式工作。

來源

2014-04-15 22:23:28 andred

謝謝，工作正常。只有一個問題，在你看來，處理這個問題的最好方法是什麼（它只改變了javascript的一系列數字的可見性）？謝謝。 – obatard

取決於情況。考慮未來的結構 - 將會有更多的圖像，最終你想從這五個鏈接以外的其他地方引發它們。你可以在anchor-elements和相應的'class =「image1」'中添加一個'data-imageover =「image1」'給數字。然後，將事件偵聽器綁定到document.querySelectorAll（「a [data-imageover]」）的每個元素上，並讓它調用由document.querySelectorAll（'。'+發現的任何元素的'show_image'-函數。 e.target.getAttribute（「data-imageover」））' 也許使用，例如，jQuery。但正如所說，取決於情況。 – andred

我明白了，謝謝你的想法。 – obatard

TypeError：'undefined'不是一個對象（評估'arrayImg [img] .style'）

回答

相關問題