javascript - 为什么在以下代码中出现未捕获的类型错误？

该代码的目的是使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!")
}

最佳答案

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

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

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

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

squares1.style.backgroundColor

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

关于javascript - 为什么在以下代码中出现未捕获的类型错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30002231/