Javascript 为什么下面的代码会出现未捕获类型错误？

这段代码的目的是让3个div在单击时改变颜色，当左侧div中的两种颜色组成右侧div时，用户会在控制台或DOM上收到肯定消息。我以为我已经完全弄明白了这一点，但现在每当我点击一个div，我就会得到一个未捕获类型错误，上面写着

未捕获类型错误：无法读取Chrome中未定义的
的属性'backgroundColor'


var squares1=document.getElementsByClassName（'square1'）；
var squares2=document.getElementsByClassName（'squares2'）；
var squares3=document.getElementsByClassName（'square3'）；
//将正方形1更改为红色、绿色或蓝色
对于（变量i=0；i
您正在使用
GetElementsByCassName
获取与类名匹配的元素数组

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

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

但是，在
checkColors（）
函数中，您尝试获取整个阵列的
backgroundColor
：

squares1.style.backgroundColor

数组没有背景色，请像在事件侦听器中那样使用
squares1[0]
获取第一个元素的属性。
您正在使用
getElementsByClassName
获取与类名匹配的元素数组

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

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

但是，在
checkColors（）
函数中，您尝试获取整个阵列的
backgroundColor
：

squares1.style.backgroundColor

数组没有背景色，请像在中一样使用
squares1[0]