我正在尝试使用 JavaScript 创建一个游戏，但在此过程中我发现了 Firefox 中的一个错误。游戏很简单。您应该猜测 RGB 十六进制代码中的颜色是什么。有6个框，您应该单击该框，如果错误或正确，它会提醒您。该游戏在 chrome、IE、Opera 中运行良好，但在 mozilla firefox 中无法运行。我做了一个警报来调试它，并且 Firefox 添加了一些内联样式。请参阅下面的屏幕截图和代码。希望您能帮助我解决 Firefox 中的这个问题。提前致谢
FIREFOX SCREENSHOT PROBLEM CHROME SCREENSHOT NO PROBLEM
<!DOCTYPE html>
<html>
<head>
<title>Color Game</title>
<style type="text/css">
body{
background-color: #232323;
}
h1 {
color:#fff;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0px auto;
}
</style>
</head>
<body>
<h1>Guess what color is<span id="colorDisplay">RGB</span>
<br/>
Click the box to know what color it is.
</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">
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[1];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
for (var i=0; i<squares.length; i++){
//add initial colors to square
squares[i].style.background = colors[i];
//add click listener to square
squares[i].addEventListener("click",function(){
var clickedColor = this.style.background;
alert(clickedColor);
if (clickedColor === pickedColor){
alert("Correct");
} else{
alert("Wrong");
}
});
}
</script>
</body>
</html>最佳答案
尝试使用 backgroundColor 属性而不是 background简写:
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[1];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
for (var i=0; i<squares.length; i++){
//add initial colors to square
squares[i].style.background = colors[i];
//add click listener to square
squares[i].addEventListener("click",function(){
var clickedColor = this.style.backgroundColor;
alert(clickedColor);
if (clickedColor === pickedColor){
alert("Correct");
} else{
alert("Wrong");
}
});
}
关于javascript - Mozilla 浏览器错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41917917/