将其设为未定义

Question

在下面的代码中，我收到一个错误，无法更改未定义的背景颜色。当我用这个代码替换 squares[i] 时。我不明白为什么？

var colors =[

    "rgb(255, 0, 0)",

    "rgb(255, 255, 0)",

    "rgb(0, 255, 255)",

    "rgb(0, 0, 255)",

    "rgb(0, 255, 0)",

    "rgb(255, 0, 255)"

];

var colorPicked = colors[3];

var head = document.querySelector("#color");

head.textContent = colorPicked;

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

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

    //to apply colors array on the square

    squares[i].style.backgroundColor = colors[i];

    //adding click event listener to square

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

        var chosenColor = this.style.backgroundColor;

        if(chosenColor == colorPicked){

            alert("correct")

        }else{

            alert("wrong")

        }

    })

}

Answer 1

Arrow function (=>)没有自己的this。使用普通函数语法或squares[i]在事件处理函数内部使用：var&nbsp;chosenColor&nbsp;=&nbsp;squares[i].style.backgroundColor;