Question

如果语句不正常，则始终显示else语句的结果。我希望在第二个框被点击时被警告正确，但它总是警告错误，也就是else语句。我是这些东西的新手，很难搞清楚。

＆＃13;

var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)"];

var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];

for(var i=0;i<squares.length;i++)
{
	squares[i].style.background=colors[i];

	squares[i].addEventListener("click", function(){
		var clickedColor = this.style.background;
		if(clickedColor === pickedColor){
			alert("correct");
		}
		else{
			alert("wrong");
		}
	});
}

＆＃13;

.square{
	width: 10%;

	padding-bottom: 10%;
	float: left;
	margin: 1.66%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>color game</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="square"></div>
	<div class="square"></div>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

＆＃13;

Answer 1

那是因为this.style.background返回内部有空格的背景颜色，而不是相同的字符串：

 colors[1] => "rgb(255,255,0)"

 this.style.background => "rgb(255, 255, 0)"
                                   ^^   ^^

Answer 2

正如您所看到的，clickedColor和pickedColor不一样，它们之间有空格。

所以要删除空格，请添加以下代码。

var clickedColor = this.style.backgroundColor.replace(/\s/g, '');

var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)"];

var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];

for(var i=0;i<squares.length;i++)
{
	squares[i].style.background=colors[i];

	squares[i].addEventListener("click", function(){
		var clickedColor = this.style.backgroundColor.replace(/\s/g, '');
    console.log([clickedColor.replace(/\s/g, ''),pickedColor]);
		if(clickedColor == pickedColor){
			alert("correct");
		}
		else{
			alert("wrong");
		}
	});
}

.square{
	width: 10%;

	padding-bottom: 10%;
	float: left;
	margin: 1.66%;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>color game</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="square"></div>
	<div class="square"></div>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

Answer 3

原因是您尝试比较的字符串不匹配。

＆＃34; RGB（255,255,0）＆＃34; vs＆＃34; rgb（255,255,0）＆＃34;。

您可以更改数组中的字符串：

 var colors = [
    "rgb(255, 0, 0)",
    "rgb(255, 255, 0)"
];

或（更好的imo）：从你想要的东西中删除空格：

var clickedColor = this.style.background.replace(/\s/g, '');

请参阅以下代码段以显示字符串的差异：

＆＃13;

var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)"];

var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];

for(var i=0;i<squares.length;i++)
{
	squares[i].style.background=colors[i];
	squares[i].addEventListener("click", function(){
		var clickedColor = this.style.background;
        console.log(pickedColor);
        console.log(clickedColor);
		if(clickedColor === pickedColor){
			alert("correct");
		}
		else{
			alert("wrong");
		}
	});
}

＆＃13;

.square{
	width: 10%;

	padding-bottom: 10%;
	float: left;
	margin: 1.66%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>color game</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="square"></div>
	<div class="square"></div>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

＆＃13;

Answer 4

我只想在之前的评论中添加简单删除空白区域可能不适合所有浏览器。例如，Firefox为后台添加了稍长的规则，如下所示： rgb(255, 255, 0) none repeat scroll 0% 0%

在实施解决方案时，您也应该考虑到这一点。也许从this.style.backgroundColor读取价值是一个好主意。

EventListener中的JavaScript if语句无法正常工作

4 个答案: