为什么我使用以下代码获得未捕获的类型错误？

The purpose of this code is to have 3 divs that change color when clicked and when the two colors in divs on the left make up the one on the right the user receives a positive message either on the console or the DOM. I thought I had this entirely figured out but now whenever I click a div I get an uncaught type error that says Uncaught TypeError: Cannot read property 'backgroundColor' of undefined in Chrome.

此代码的目的是在单击时有3个div改变颜色,当左边的div中的两个颜色构成右边的那个时,用户在控制台或DOM上收到肯定的消息。我以为我完全想通了这个,但现在每当我点击一个div时,我会得到一个未捕获的类型错误,表示Uncaught TypeError:无法读取Chrome中未定义的属性'backgroundColor'。

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!")
}

3 个解决方案

#1

You're using getElementsByClassName to fetch an array of elements that match your class name.

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

When binding your events, you correctly use the [0] index of that array to grab the first item in it:

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

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

However, in the checkColors() function you try to grab the backgroundColor of the entire array:

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

squares1.style.backgroundColor

An array doesn't have a background color, use squares1[0] like you did in the event listener to get the properties of the first element.

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

#2

because this code:

因为这段代码:

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;}

}

checks the squares1 etc.. as if it is a single element while actually it is a nodeList (so you need to check each squares1[i] and so on). probably same issue may be elsewhere in the code, did not check all.

检查square1等..好像它是一个单独的元素,而实际上它是一个nodeList(所以你需要检查每个squares1 [i]等等)。可能同样的问题可能在代码的其他地方,没有检查所有。

#3

Get elements by class name returns an array of elements. You need to specify which one. Try squares1[0] etc.

按类名获取元素返回元素数组。您需要指定哪一个。尝试square1 [0]等。