javascript中的If语句不响应数组元素

6个框被声明为数组元素

我指定了一个

if

语句，用于在单击与数组[2]的RGB颜色匹配的框时警告“正确”，并指定了一个

else

语句，用于在与数组元素[2]中的RGB颜色不匹配时警告“错误”

一切似乎都是正确的，但现在我点击的任何颜色都会提示“错误”，这是不应该的。因为

[2]

中包含的框3旨在提醒“正确”

请帮助我，因为我可以找出为什么即使在我单击分配给

[2]

的右侧框时，它也没有显示“correct”

请问我该怎么走 这有帮助吗

//切换按钮-----------------------------------------------------------------------------------------------------------------------------
var click=document.querySelector（'按钮'）
功能更改（）{
document.body.classList.toggle（'body'）
}
click.addEventListener（'click'，change）
//网格着色------------------------------------------------------------------------------------------------------------------------------
变量颜色=[
“rgb（255,0,0）”，
“rgb（255255,0）”，
"rgb(25,0255)",，
“rgb（25255203）”，
“rgb（250,0,0）”，
“rgb（0255100）”，
]
//精选颜色****************************************************
选择的变量=颜色[4]
var colorDisplay=document.getElementById（'colorDisplay'）
colorDisplay.textContent=已拾取
//选择轴网****************************************************
var square=document.queryselectoral（“.square”）
//使用数组将var颜色添加到var square************************
对于（变量i=0；i

正文{
背景:#2323；
}
.身体{
背景色：rgb（45174206）；
}
.广场{
宽度：30%；
背景：巧克力；
垫底：30%；
浮动：左；
利润率：1.66%；
}
#骗局{
最大宽度：660像素；
保证金：0自动；
}
h1{
颜色：玉米丝；
保证金：0自动；
}

游戏项目
彩色RGB彩色游戏
点击我

我在单击事件中添加了一个console.log，在大约30秒内发现了问题，如下所示：

square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    console.log(clickedColor + ' VS ' + picked);
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
});

单击第四个框时的结果是

rgb（250,0,0）与rgb（250,0,0）

。 所以问题是，

this.style.background的结果

是

rgb（250,0,0）

当数组的颜色定义为

rgb（250,0,0）

时，请注意间距。因此，只需调整颜色数组间距即可解决问题

下面是一个工作示例：

//切换按钮-----------------------------------------------------------------------------------------------------------------------------
var click=document.querySelector（“按钮”）；
功能更改（）{
document.body.classList.toggle（'body'）；
}
click.addEventListener（'click'，change）；
//网格着色------------------------------------------------------------------------------------------------------------------------------
变量颜色=[
“rgb（255,0,0）”，
“rgb（255，255，0）”，
“rgb（25,0255）”，
“rgb（252552503）”，
“rgb（250,0,0）”，
'rgb（0，255，100）'，
];
//精选颜色****************************************************
选择的变量=颜色[4]；
var colorDisplay=document.getElementById（'colorDisplay'）；
colorDisplay.textContent=已拾取；
//选择轴网****************************************************
var square=document.queryselectoral（'.square'）；
//使用数组将var颜色添加到var square************************
对于（变量i=0；i

正文{
背景:#2323；
}
.身体{
背景色：rgb（45174206）；
}
.广场{
宽度：30%；
背景：巧克力；
垫底：30%；
浮动：左；
利润率：1.66%；
}
#骗局{
最大宽度：660像素；
保证金：0自动；
}
h1{
颜色：玉米丝；
保证金：0自动；
}

游戏项目
彩色RGB彩色游戏
点击我

我在单击事件中添加了一个console.log，在大约30秒内发现了问题，如下所示：

square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    console.log(clickedColor + ' VS ' + picked);
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
});

单击第四个框时的结果是

rgb（250,0,0）与rgb（250,0,0）

。 所以问题是，

this.style.background的结果

是

rgb（250,0,0）

当数组的颜色定义为

rgb（250,0,0）

时，请注意间距。因此，只需调整颜色数组间距即可解决问题

下面是一个工作示例：

//切换按钮-----------------------------------------------------------------------------------------------------------------------------
var click=document.querySelector（“按钮”）；
功能更改（）{
document.body.classList.toggle（'body'）；
}
click.addEventListener（'click'，change）；
//网格着色------------------------------------------------------------------------------------------------------------------------------
变量颜色=[
“rgb（255,0,0）”，
“rgb（255，255，0）”，
“rgb（25,0255）”，
“rgb（252552503）”，
“rgb（250,0,0）”，
'rgb（0，255，100）'，
];
//精选颜色****************************************************
选择的变量=颜色[4]；
var colorddisplay=document.getElementById（'colorDis