的Mozilla瀏覽器的bug

我試圖使用JavaScript創建一個遊戲，但前進的道路上，我發現在Firefox中的錯誤。遊戲很簡單。你應該猜測RGB hexacode中的顏色是什麼。有6個框，你應該點擊框，如果它錯誤或正確，它會發出警報。該遊戲在Chrome，IE，Opera中運行良好，但在Mozilla Firefox中不起作用。我做了一個警告來調試它，Firefox用它添加一些內聯樣式。請參閱下面的屏幕截圖和代碼。希望你能幫助我如何解決這個問題在Firefox中。在此先感謝的Mozilla瀏覽器的bug

FIREFOX SCREENSHOT PROBLEM CHROME SCREENSHOT NO PROBLEM

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Color Game</title> 
 
<style type="text/css"> 
 
\t body{ 
 
\t \t background-color: #232323; 
 
\t } 
 

 
\t h1 { 
 
\t \t color:#fff; 
 
\t } 
 
\t .square { 
 
\t \t width: 30%; 
 
\t \t background: purple; 
 
\t \t padding-bottom: 30%; 
 
\t \t float: left; 
 
\t \t margin: 1.66%; 
 
\t } 
 

 
\t #container { 
 
\t \t max-width: 600px; 
 
\t \t margin: 0px auto; 
 
\t } 
 
</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"> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
\t 
 
\t var colors = [ 
 
\t "rgb(255, 0, 0)", 
 
\t "rgb(255, 255, 0)", 
 
\t "rgb(0, 255, 0)", 
 
\t "rgb(0, 255, 255)", 
 
\t "rgb(0, 0, 255)", 
 
\t "rgb(255, 0, 255)" 
 
\t ]; 
 

 
\t var squares = document.querySelectorAll(".square"); 
 
\t var pickedColor = colors[1]; 
 
\t var colorDisplay = document.querySelector("#colorDisplay"); 
 

 
\t colorDisplay.textContent = pickedColor; 
 

 
\t for (var i=0; i<squares.length; i++){ 
 
\t \t //add initial colors to square 
 
\t \t squares[i].style.background = colors[i]; 
 
\t \t //add click listener to square 
 
\t \t squares[i].addEventListener("click",function(){ 
 
\t \t \t var clickedColor = this.style.background; 
 
\t \t \t alert(clickedColor); 
 
\t \t \t if (clickedColor === pickedColor){ 
 
\t \t \t \t alert("Correct"); 
 
\t \t \t } else{ 
 
\t \t \t \t alert("Wrong"); 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 

 
</script> 
 

 
</body> 
 
</html>

來源

2017-01-29 JackOfAllTrades

謝謝你們所有的幫助！ – JackOfAllTrades

嘗試使用，而不是background速記backgroundColor屬性：

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"); 
      } 
     }); 
    }

來源

2017-01-29 05:37:08

謝謝，先生，它的工作！欣賞它！ – JackOfAllTrades

不客氣。很高興它幫助:) –

不是一個Firefox的錯誤。您應指定backgroundColor，否則將檢索色加no-repeat scroll等

這工作：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Color Game</title> 
 
<style type="text/css"> 
 
\t body{ 
 
\t \t background-color: #232323; 
 
\t } 
 

 
\t h1 { 
 
\t \t color:#fff; 
 
\t } 
 
\t .square { 
 
\t \t width: 30%; 
 
\t \t background: purple; 
 
\t \t padding-bottom: 30%; 
 
\t \t float: left; 
 
\t \t margin: 1.66%; 
 
\t } 
 

 
\t #container { 
 
\t \t max-width: 600px; 
 
\t \t margin: 0px auto; 
 
\t } 
 
</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"> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
\t <div class="square"> </div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
\t 
 
\t var colors = [ 
 
\t "rgb(255, 0, 0)", 
 
\t "rgb(255, 255, 0)", 
 
\t "rgb(0, 255, 0)", 
 
\t "rgb(0, 255, 255)", 
 
\t "rgb(0, 0, 255)", 
 
\t "rgb(255, 0, 255)" 
 
\t ]; 
 

 
\t var squares = document.querySelectorAll(".square"); 
 
\t var pickedColor = colors[1]; 
 
\t var colorDisplay = document.querySelector("#colorDisplay"); 
 

 
\t colorDisplay.textContent = pickedColor; 
 

 
\t for (var i=0; i<squares.length; i++){ 
 
\t \t //add initial colors to square 
 
\t \t squares[i].style.background = colors[i]; 
 
\t \t //add click listener to square 
 
\t \t squares[i].addEventListener("click",function(){ 
 
\t \t \t var clickedColor = String(this.style.backgroundColor); 
 
\t \t \t alert(clickedColor); 
 
\t \t \t if (clickedColor === pickedColor){ 
 
\t \t \t \t alert("Correct"); 
 
\t \t \t } else{ 
 
\t \t \t \t alert("Wrong"); 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 

 
</script> 
 

 
</body> 
 
</html>

來源

2017-01-29 05:38:32 nico

欣賞幫助先生它現在的作品！ – JackOfAllTrades

從我的理解，它是與背景。無重複滾動通常是與背景相關的屬性。上面的代碼評論安德斯應該幫助你。祝你好運。

來源

2017-01-29 05:38:50 MonkeyWithMachine

的Mozilla瀏覽器的bug

回答

相關問題