訪問JavaScript的個人風格元素錯誤

我想用JS構建一個顏色猜測遊戲。我用了一個顏色數組和初始顏色列表。到目前爲止，整個代碼的工作原理，直到我試圖用每個方塊點擊當前顏色時顯示一個警報。訪問JavaScript的個人風格元素錯誤

在控制檯我得到的錯誤爲：

Uncaught TypeError: Cannot read property 'style' of undefined at HTMLDivElement. (color_game.js:25)

線25分這樣的：

var clickedColor = squares[i].style.background;

在這裏，我試圖讓參考陣列中的每個平方的風格。（請看下面的src）

這說明......在進一步的檢查中未定義。

我的全代碼附加如下： HTML：

<body> 

    <h1>The Great <span id="colorDisp">RGB</span> Guessing Game</h1> 
    <div id="container"> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    </div> 

    <script src="color_game.js" type="text/javascript"></script> 

</body>

JavaScript代碼：

var colorArr = [ 
    "rgb(255, 0, 0)", 
    "rgb(255, 255, 0)", 
    "rgb(0, 255, 0)", 
    "rgb(0, 255, 255)", 
    "rgb(0, 0, 255)", 
    "rgb(255, 0, 255)" 
]; 

var squares = document.querySelectorAll(".square"); 
var pickedColor = colorArr[3]; 
var colorDisp = document.getElementById("colorDisp"); 
colorDisp.innerHTML = pickedColor; 

for (var i = 0; i < squares.length; i++) { 
    squares[i].style.background = colorArr[i]; 

    squares[i].addEventListener("click", function() { 

    var clickedColor = squares[i].style.background; 
    alert(clickedColor); 

    if (clickedColor === pickedColor) { 
     alert("CORRECT"); 
    } else { 
     alert("WRONG COLOR!!!"); 
    } 

    }); 
}

我已經試過這兩條線，但我的代碼不執行：

var clickedColor = squares[i].style.background;

and

var clickedColor = this.style.background;

有人能告訴我如何訪問JS中數組的樣式元素嗎？

來源

2017-08-02 Anand Rajput

嘗試將發生錯誤的那一行更改爲'var clickedColor = event.target.style.background;' – Kevin

您可能希望在該行上方放置一個'console.log（i）'，然後檢查瀏覽器控制檯......（我只是想知道，我們是否會就這個特殊問題層出不窮的問題......？） – CBroe

使用該事件來獲取目標元素。

squares[i].addEventListener("click", function(e) { 

    var clickedColor = e.target.style.background; 
    alert(clickedColor); 

    if (clickedColor === pickedColor) { 
    alert("CORRECT"); 
    } else { 
    alert("WRONG COLOR!!!"); 
    } 

});

來源

2017-08-02 20:22:32

感謝你們兩位。它現在有效。有人可以向我解釋e.target.style.background是如何工作的。再次感謝 –

「e」是java腳本傳遞給事件監聽器的任何回調的事件對象。該對象包含關於事件的信息（在這種情況下點擊），比如用戶點擊的標籤，事件的類型等等。 –

好的，非常感謝@Praveen –

我做了2個小改動，它對我很有幫助。

修改後的HTML部分爲<div>添加一些文本。例如

<div id="container"> 
     <div class="square"> 
      A 
     </div> 
     <div class="square"> 
      B 
     </div> 
     <div class="square"> 
      C 
     </div> 
     <div class="square"> 
      D 
     </div> 
     <div class="square"> 
      E 
     </div> 
     <div class="square"> 
      F 
     </div> 
    </div>

然後修改行

var clickedColor = squares[i].style.background;

到

var clickedColor = this.style.background;

現在正常工作對我來說。

來源

2017-08-02 20:43:35 MKR

非常感謝。活動正在開展。 –

訪問JavaScript的個人風格元素錯誤

回答

相關問題