我想制作一个使用HTML,CSS和Javascript的小游戏。简单的Javascript文件无法正常工作
HTML和CSS和大部分的Javascript代码似乎工作正常。然而,当在FireFox中启动程序并尝试点击背景RGB值与存储在变量中的RGB值相匹配的正方形div时,我会得到错误的答案。这是假设警告用户“正确”,而是所有警报输出“错误”。
下面是HTML文件
<!DOCTYPE>
<html>
<head>
<title>Color Game</title>
<link rel="stylesheet" type="text/css" href="colorGame3.css">
</head>
<body>
<h1>
RGB Color Game
<span id = "colorDisplay">
RGB
</span>
</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 type="text/javascript" src="colorGame3.js"></script>
</body>
</html>
这里是CSS文件
body{
background-color: #232323;
}
.square{
width:30%;
background:purple;
padding-bottom:30%;
float:left;
margin:1.66%;
}
#container{
max-width:600px;
margin:20px auto;
}
这里是JavaScript文件
var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)",
"rgb(0,255,0)",
"rgb(0,255,255)",
"rgb(0,0,255)",
"rgb(255,0,255)"
]
var squares = document.querySelectorAll(".square");
var pickedColor = colors[2];
var colorDisplay = document.getElementById("colorDisplay");
colorDisplay.textContent = pickedColor;
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");
}
});
}
你在控制台上看到了什么错误? –
我认为你的问题是你使用背景而不是backgroundColor。但我不确定 – Kerndog73
你应该console.log'pickedColor'和'clickedColor',它们不是同一个值。在Chrome中,至少在Firefox中可能是相同的,当从'style.background'获取值时,值在逗号分隔符之后被格式化为空格 –