Question

我正在尝试使用javascript创建一个游戏，但一路上我在firefox中发现了一个错误。游戏很简单。你应该猜出RGB hexacode中的颜色是什么。有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>

Answer 1

尝试使用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");
            }
        });
    }

Answer 2

不是Firefox的错误。您应指定backgroundColor，否则它将检索颜色加no-repeat scroll等。

这有效：

<!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 = String(this.style.backgroundColor);
			alert(clickedColor);
			if (clickedColor === pickedColor){
				alert("Correct");
			} else{
				alert("Wrong");
			}
		});
	}

</script>

</body>
</html>

Answer 3

据我了解，它与背景有关。无重复滚动通常是与背景相关联的属性。 Andres评论的上述代码应该可以帮到你。祝好运。

Mozilla浏览器bug

3 个答案: