6 个框被声明为数组元素。
我分配了一个 if 语句来警告 “正确” 如果匹配 array[2] 的 RGB 颜色的框被点击并且一个 else 如果它与数组元素 [2] 中的 RGB 颜色不匹配，则警告“错误”的语句。
一切似乎都是正确的，但现在我点击的任何颜色都会提示“错误”，这本不该如此。因为包含在 [2] 中的方框 3 是为了提醒 “正确”。
请帮助我，因为我可以弄清楚为什么它不显示“正确”，即使我单击分配给 [2] 的正确框也是如此。
请问我该怎么办 这有帮助吗？
// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
document.body.classList.toggle('body')
}
click.addEventListener('click', change)
// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
'rgb(255,0,0)',
'rgb(255,255,0)',
'rgb(25,0,255)',
'rgb(25,255,203)',
'rgb(250,0,0)',
'rgb(0,255,100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
// select grids****************************************************
var square = document.querySelectorAll('.square')
// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
// add initial listeners to square
square[i].style.background = colors[i]
// add clicked listeners to square
square[i].addEventListener('click', function () {
var clickedColor = this.style.background;
if(clickedColor === picked){
alert('correct');
} else {
alert('wrong');
}
});
}body{
background: #232323;
}
.body{
background-color: rgb(45, 174, 206);
}
.square{
width: 30%;
background: chocolate;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#con{
max-width: 660px;
margin: 0 auto;
}
h1{
color: cornsilk;
margin: 0 auto;
}<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Game project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
<h1> colour <span id="colorDisplay">RGB</span> color game</h1>
<div id="con">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<button>click me</button>
</body>
<script src="game.js"></script>
</html>最佳答案
好吧，我在大约 30 秒内通过在点击事件中添加一个 console.log 来发现问题，如下所示:
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) VS rgb(250,0,0)。
所以问题是 this.style.background; 的结果是 rgb(250, 0, 0) 而你的数组的颜色定义为 rgb( 250,0,0)，注意间距。因此，只需修复您的颜色阵列间距即可解决您的问题。
这是工作示例:
// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button');
function change () {
document.body.classList.toggle('body');
}
click.addEventListener('click', change);
// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
'rgb(255, 0, 0)',
'rgb(255, 255, 0)',
'rgb(25, 0, 255)',
'rgb(25, 255, 203)',
'rgb(250, 0, 0)',
'rgb(0, 255, 100)',
];
// picked color****************************************************
var picked = colors[4];
var colourDisplay = document.getElementById('colorDisplay');
colourDisplay.textContent = picked;
// select grids****************************************************
var square = document.querySelectorAll('.square');
// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
// add initial listeners to square
square[i].style.background = colors[i] ;
// add clicked listeners to square
square[i].addEventListener('click', function () {
var clickedColor = this.style.background;
if(clickedColor === picked){
alert('correct');
} else {
alert('wrong');
}
});
}body{
background: #232323;
}
.body{
background-color: rgb(45, 174, 206);
}
.square{
width: 30%;
background: chocolate;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#con{
max-width: 660px;
margin: 0 auto;
}
h1{
color: cornsilk;
margin: 0 auto;
}<!-- this game was developed by alabo -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Game project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
<h1> colour <span id="colorDisplay">RGB</span> color game</h1>
<div id="con">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<button>click me</button>
</body>
<script src="game.js"></script>
</html>关于javascript - javascript 中的 If 语句不响应数组元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49858343/