Question

为什么第一个代码工作但不是第二个？它说“Uncaught TypeError：无法读取未定义的属性'样式' 在HTMLDivElement。“

所有正方形都是div，并且已在代码中声明。

var colors=[
    "rgb(255, 0, 0)",
    "rgb(255, 255, 0)",
    "rgb(255, 0, 255)",
    "rgb(25, 50, 0)",
    "rgb(2, 0, 50)",
    "rgb(255, 60, 0)"
]

var squares= document.querySelectorAll(".square");

var pickedColor=colors[3];

var colorDisplay= document.getElementById("colorDisplay");

colorDisplay.textContent= pickedColor;

for(var i=0; i<squares.length; i++){
    squares[i].style.backgroundColor = colors[i];
    squares[i].addEventListener("click", function(){
        alert(this.style.backgroundColor);
    }); 


}

var colors=[
    "rgb(255, 0, 0)",
    "rgb(255, 255, 0)",
    "rgb(255, 0, 255)",
    "rgb(25, 50, 0)",
    "rgb(2, 0, 50)",
    "rgb(255, 60, 0)"
]

var squares= document.querySelectorAll(".square");

var pickedColor=colors[3];

var colorDisplay= document.getElementById("colorDisplay");

colorDisplay.textContent= pickedColor;

for(var i=0; i<squares.length; i++){
    squares[i].style.backgroundColor = colors[i];
    squares[i].addEventListener("click", function(){
        alert(squares[i].style.backgroundColor);
    }); 

}

Answer 1

为什么第一个代码工作但不是第二个？它说 square [i]未定义，而我已定义它。

因为在执行事件处理程序时，i的值已达到squares.length。

只需将var更改为let

即可

for( let i=0; i<squares.length; i++ ){

Answer 2

好像你拼错了。

    alert(sqaures[i].style.backgroundColor);

sqaures - ＆gt;正方形

Javascript rgb颜色猜谜游戏

2 个答案: