Mozilla Browser Bug

Ich versuche ein Spiel mit Javascript zu erstellen, aber auf dem Weg habe ich einen Bug in Firefox gefunden. Das Spiel ist einfach. Sie sollten raten, welche Farbe im RGB Hexacode ist. Es gibt 6 Boxen, Sie sollten auf das Feld klicken und es wird angezeigt, wenn es falsch oder richtig ist. Das Spiel funktioniert gut in Chrome, IE, Opera, während es in Mozilla Firefox nicht funktioniert. Ich machte eine Warnung, um es zu debuggen und Firefox fügen Sie einige Inline-Stil damit. Bitte sehen Sie den Screenshot unten und Code. Hoffentlich können Sie mir helfen, dieses Problem in Firefox zu beheben. Vielen Dank im VorausMozilla Browser 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>

Quelle

2017-01-29 JackOfAllTrades

Vielen Dank für die Hilfe Jungs! – JackOfAllTrades

Versuchen backgroundColor Eigenschaft statt background Stenografie mit:

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

Quelle

2017-01-29 05:37:08

Danke, es funktioniert! Bin dankbar! – JackOfAllTrades

Gern geschehen. Froh, dass es geholfen hat :) –

kein Firefox Bug. Sie sollten backgroundColor angeben, sonst wird es die Farbe abrufen und no-repeat scroll usw.

Dies funktioniert:

<!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>

Quelle

2017-01-29 05:38:32 nico

Schätze die Hilfe Sir es funktioniert jetzt! – JackOfAllTrades

Von meinem Verständnis, es hat etwas mit dem Hintergrund zu tun. Kein Wiederholungslauf ist normalerweise eine Eigenschaft, die mit dem Hintergrund verknüpft ist. Der obige von Andres kommentierte Code sollte Ihnen helfen. Viel Glück.

Quelle

2017-01-29 05:38:50 MonkeyWithMachine

Mozilla Browser Bug

Antwort

Verwandte Themen