javascript - 为什么我在使用以下代码时遇到未捕获的类型错误？

Question

此代码的目的是让 3 个 div 在单击时改变颜色，并且当左侧 div 中的两种颜色构成右侧的颜色时，用户会在控制台或 DOM 上收到一条积极消息。我以为我已经完全弄清楚了这一点，但现在每当我单击一个 div 时，我都会在 Chrome 中收到一个未捕获的类型错误，其中显示:

Uncaught TypeError: Cannot read property 'backgroundColor' of undefined

Fiddle

var squares1 = document.getElementsByClassName('square1');
var squares2 = document.getElementsByClassName('square2');
var squares3 = document.getElementsByClassName('square3');

//change squares1 to either red,green, or blue
for(var i = 0; i < squares1.length; i++) {
    squares1[i].addEventListener("click", changeColor);
}
//change squares2 to either red, green, or blue
for(var i = 0; i < squares2.length; i++) {
    squares2[i].addEventListener("click", changeColor);
}
//changes squares3 to either red, green, blue, magenta, cyan, etc
for(var i = 0; i < squares3.length; i++) {
    squares3[i].addEventListener("click", changeColors);
}

function changeColor(event){
    if(event.target.style.backgroundColor == 'rgb(255, 0, 0)')
    {
        event.target.style.backgroundColor = 'rgb(0, 255, 0)';
        checkColors();
    }
    else if (event.target.style.backgroundColor == 'rgb(0, 255, 0)')
    {
        event.target.style.backgroundColor = 'rgb(0, 0, 255)';
        checkColors();

    }
    else
    {
        event.target.style.backgroundColor = 'rgb(255, 0, 0)';
        checkColors();

    }
}

function changeColors(event){
    if(event.target.style.backgroundColor == 'rgb(255, 0, 0)')
    {
        event.target.style.backgroundColor = 'rgb(255, 0, 255)';
        checkColors();
    }
    else if (event.target.style.backgroundColor == 'rgb(255, 0, 255)')
    {
        event.target.style.backgroundColor = 'rgb(255, 255, 0)';
        checkColors();

    }
    else if (event.target.style.backgroundColor == 'rgb(255, 255, 0)')
    {
        event.target.style.backgroundColor = 'rgb(0, 0, 255)';
        checkColors();

    }
    else if (event.target.style.backgroundColor == 'rgb(0, 0, 255)')
    {
        event.target.style.backgroundColor = 'rgb(0, 255, 255)';
        checkColors();

    }
    else if (event.target.style.backgroundColor == 'rgb(0, 255, 255)')
    {
        event.target.style.backgroundColor = 'rgb(255, 0, 255)';
        checkColors();

    }
    else if (event.target.style.backgroundColor == 'rgb(255, 0, 255)')
    {
        event.target.style.backgroundColor = 'rgb(0, 255, 0)';
        checkColors();

    }
    else if (event.target.style.backgroundColor == 'rgb(0, 255, 0)')
    {
        event.target.style.backgroundColor = 'rgb(255, 255, 0)';
        checkColors();

    }
    else if (event.target.style.backgroundColor == 'rgb(255, 255, 0)')
    {
        event.target.style.backgroundColor = 'rgb(0, 255, 255)';
        checkColors();

    }

    else
    {
        event.target.style.backgroundColor = 'rgb(255, 0, 0)';
        checkColors();

    }
}

function checkColors(){
    if (squares1.style.backgroundColor=='rgb(255, 0, 0)' && squares2.style.backgroundColor=='rgb(255, 0, 0)'){
        squares3.style.backgroundColor='rgb(255, 0, 0)';
        gotIt;
    }
    else if (squares1.style.backgroundColor=='rgb(255, 0, 0)' && squares2.style.backgroundColor=='rgb(0, 0, 255)'){
        squares3.style.backgroundColor='rgb(255, 0, 255)';
        gotIt;
    }
    else if (squares1.style.backgroundColor=='rgb(255, 0, 0)' && squares2.style.backgroundColor=='rgb(0, 255, 0)'){
        squares3.style.backgroundColor='rgb(255, 255, 0)';
        gotIt;
    }
    else if (squares1.style.backgroundColor=='rgb(0, 0, 255)' && squares2.style.backgroundColor=='rgb(0, 0, 255)'){
        squares3.style.backgroundColor='rgb(0, 0, 255)';
        gotIt;
    }
    else if (squares1.style.backgroundColor=='rgb(0, 0, 255)' && squares2.style.backgroundColor=='rgb(0, 255, 0)'){
        squares3.style.backgroundColor='rgb(0, 255, 255)';
        gotIt;
    }
    else if (squares1.style.backgroundColor=='rgb(0, 0, 255)' && squares2.style.backgroundColor=='rgb(255, 0, 0)'){
        squares3.style.backgroundColor='rgb(255, 0, 255)';
        gotIt;
    }
    else if (squares1.style.backgroundColor=='rgb(0, 255, 0)' && squares2.style.backgroundColor=='rgb(0, 255, 0)'){
        squares3.style.backgroundColor='rgb(0, 255, 0)';
        gotIt;
    }
    else if (squares1.style.backgroundColor=='rgb(0, 255, 0)' && squares2.style.backgroundColor=='rgb(255, 0, 0)'){
        squares3.style.backgroundColor='rgb(255, 255, 0)';
        gotIt;
    }
    else if (squares1.style.backgroundColor=='rgb(0, 255, 0)' && squares2.style.backgroundColor=='rgb(0, 0, 255)'){
        squares3.style.backgroundColor='rgb(0, 255, 255)';
        gotIt;
    }
else{youMissed;}

}

function gotIt(){
    console.log("You got it!")
}

function youMissed(){
    console.log("Try Again!")
}

Answer 1

您正在使用 getElementsByClassName 来获取与您的类名匹配的元素数组。

绑定(bind)事件时，您可以正确使用该数组的 [0] 索引来获取其中的第一项:

squares1[i].addEventListener("click", changeColor);

但是，在 checkColors() 函数中，您尝试获取整个数组的 backgroundColor:

squares1.style.backgroundColor

数组没有背景颜色，请像在事件监听器中一样使用 squares1[0] 来获取第一个元素的属性。