Mozilla 浏览器错误答案

【问题标题】：Mozilla browser bugMozilla 浏览器错误
【发布时间】：2017-02-02 21:15:40
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

感谢大家的帮助！

标签： javascript google-chrome debugging firefox

【解决方案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");
            }
        });
    }

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

据我了解，这与背景有关。无重复滚动通常是与背景关联的属性。安德烈斯评论的上述代码应该可以帮助您。祝你好运。

【讨论】：