<分区>
尝试使用 JS.Console 制作猜色游戏时没有显示任何错误，但它警告我“错了!”即使我选择了一个正确的数字，当它需要提醒“正确!”时......我已经尝试解决这个问题大约三个小时了!
如果我删除 else{ alert ("Wrong!") } 然后点击颜色，则根本没有回调。另外，如果我在控制台中输入 square[i] .style.background 它返回我
undefined
这是我的代码:
var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)",
"rgb(0,255,0)",
"rgb(0,255,255)",
"rgb(0,0,225)",
"rgb(255,0,255)"
]
var squares = document.querySelectorAll(".square");
var pickedColor = colors [3];
var colorDisplay = document.getElementById("colorDisplay");
colorDisplay.textContent = pickedColor;
for(var i = 0; i <squares.length;i++){
// add initial colors to squares
squares[i].style.background = colors[i];
// add click listeners to squares
squares[i].addEventListener ("click",function() {
// grab color of clicked square
var clickedColor = this.style.background;
// compare color to pickedColor
if(clickedColor === pickedColor){
alert("Correct!");
} else {
alert("Wrong!")
}
});
}
这是我的 html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Game</title>
<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>
<h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>
<div id="container">
<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>
<script src="colorGame.js"></script>
</body>
</html>