Ich brauche Hilfe herauszufinden, warum diese 'wenn' Anweisung nicht funktioniert

Ich versuche, ein einfaches RGB-Spiel mit HTML, CSS und JavaScript (Lernen) zu machen.Ich brauche Hilfe herauszufinden, warum diese 'wenn' Anweisung nicht funktioniert

Wenn ich auf eine Farbe klicke, erscheint "korrekt" oder "falsch", wobei der statische Wert colors[3] der richtige Wert ist. Ich habe mehrere Dinge getestet, und ich denke, es hat etwas mit Zahlen und Strings zu tun, aber ich habe keine Ahnung. Wenn Sie auf eine Farbe klicken, sind sie alle "falsch" und nicht, wenn Sie auf die richtige Farbe klicken, in diesem Fall Farbe [3] (Cyan), sollte "korrekt" angezeigt werden.

Danke.

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[3]; 
 
console.log(pickedColor); 
 
var colorDisplay = document.querySelector("#colorDisplay"); 
 

 
colorDisplay.textContent = pickedColor; 
 

 
for (var i = 0; i < squares.length; i++){ 
 
    squares[i].style.background = colors[i]; 
 

 
    squares[i].addEventListener("click", function(){ 
 
     var clickedColor = this.style.background; 
 

 
     if(clickedColor === pickedColor){ 
 
     alert("correct"); 
 
     } else { 
 
     alert("wrong"); 
 
     } 
 
    }); 
 
}

body { 
 
    background-color: #232323; 
 
} 
 
.square { 
 
    width: 30%; 
 
    background: purple; 
 
    padding-bottom: 30%; 
 
    float: left; 
 
    margin: 1.66%; 
 
} 
 
#container { 
 
    margin: 0 auto; 
 
    max-width: 600px; 
 
} 
 
h1 { 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Color Game</title> 
 
    <link rel="stylesheet" href="colorGame.css"> 
 
</head> 
 

 
<body> 
 
    <h1>The Great <span id="colorDisplay">RGB</span> Color Game</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" src="colorGame.js"></script> 
 
</body> 
 

 
</html>

Quelle

2016-05-03 nateph

Willkommen zu stapeln! Wenn du sagst, dass etwas nicht funktioniert, lass uns wissen, was eigentlich nicht funktioniert. Welches Verhalten passiert, das nicht soll? Erhalten Sie Fehler in der Konsole? – azium

Ich füge es an den Anfang. Grundsätzlich, wenn Sie auf eine Farbe klicken, sind sie alle "falsch" und nicht, wenn Sie auf die richtige Farbe klicken, in diesem Fall die Farbe [3] (Cyan), sollte "korrekt" angezeigt werden. Keine Fehler in der Konsole. – nateph

Machen Sie eine Konsolenausgabe von "clickedcolor" und "pickedcolor" und sehen Sie, was der Unterschied ist –

Soweit ich herausgefunden haben, es ist nur ein Problem mit der Formatierung des Wert Strings. pickedColor hatte Leerzeichen zwischen den rgb-Werten.

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)" 
]

Quelle

2016-05-03 20:04:11 Keiwan

Sie vergleichen 2 Zeichenketten clickedColor hat Leerzeichen und pickedColor nicht. Oder setzen Räume in pickedColor oder entfernen weißen Flecken in clickedColor wie:

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[3]; 
console.log(pickedColor); 
var colorDisplay = document.querySelector("#colorDisplay"); 

colorDisplay.textContent = pickedColor; 

for (var i = 0; i < squares.length; i++){ 
    squares[i].style.background = colors[i]; 

    squares[i].addEventListener("click", function(){ 
     var clickedColor = this.style.background; 

     if(clickedColor.replace(/ /g,'') === pickedColor){ 
     alert("correct"); 
     } else { 
     alert("wrong"); 
     } 
    }); 
}

Quelle

2016-05-03 20:04:22 fdfey

Danke! Ich wusste nicht über das Format der rgb-Spezifikationen. – nateph

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)" 
]

verwenden, und Sie werden gut zu gehen. Es gibt zusätzliche Leerzeichen in der Ausgabe, die Sie von this.background.style erhalten.

Quelle

2016-05-03 20:04:31 Nirri

Danke! Ich wusste nicht über das Format der rgb-Spezifikationen. – nateph

Dieses Spiel funktioniert nicht richtig, weil Sie Ihren Vergleich durchführen. Browser haben viele Macken, und eine von ihnen ist, wie sie Eigenschaften interpretieren.

Zum Beispiel würden Sie davon ausgehen, dass diese beiden Eigenschaften sind die gleichen:
this.style.background
this.style.background-color

Aber je nach Browser, könnten Sie falsch oder richtig sein. IE ist insbesondere inkonsistent, und häufig Änderungen an this.style.background keinen Einfluss auf background-color überhaupt, so background:red; bedeutet nicht background-color ist rot. Es bedeutet auch nicht, dass background-color gleich rgb(255,0,0) oder red oder #ff0000 ist. Es ist extrem unvorhersehbar.

Um dieses Spiel funktionieren zu lassen, müssten Sie etwas tun, das genannt wird, das normalisiert. Das bedeutet, dass Sie eine Funktion schreiben würden, die in der Lage ist, red, #ff0000, #f00, rgba(255,0,0), rgba(255,0,0,1) und rgb(255 , 0 ,0) zu verarbeiten und dieses in ein spezifisches Format umzuwandeln, das dann korrekt verglichen werden kann.

Quelle

2016-05-03 20:06:16 Josh

Vielen Dank! Ich wusste nicht über das Format der rgb-Spezifikationen. – nateph

Sie müssen Leerzeichen nach dem Komma in das Array Ihrer Farbe schreiben !!

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)"]

Quelle

2016-05-03 20:08:13

Ich brauche Hilfe herauszufinden, warum diese 'wenn' Anweisung nicht funktioniert

Antwort

Verwandte Themen