1
J'essaie d'exécuter ce code et tout semble fonctionner sauf l'instruction if. Même s'il existe une correspondance mais qu'elle n'affiche toujours pas la bonne réponse comme indiqué dans le code, elle affiche le code dans l'instruction else.Instruction "si" brisée dans le code 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[3];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
for (var i = 0; i < colors.length; i++) {
//add initial colors to squares
squares[i].style.background = colors[i];
//add event listener
squares[i].addEventListener("click", function() {
//get color of picked square
var clickedColor = this.style.background;
//compare to the pickedColor
console.log(clickedColor);
if (clickedColor === pickedColor) {
alert("COORREECCTT");
} else {
alert("WRROONGG!!");
}
});
}body {
background-color: #232323;
}
.square {
width: 30%;
background-color: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
h1 {
color: #fff;
}<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>
</body>
C'est pourquoi c'est généralement une mauvaise idée de mélanger la présentation et les données. Une meilleure approche consisterait à attacher le gestionnaire de clics uniquement à la div correcte et pas tous. – JJJ
Comme la réponse ci-dessous suggère que vous faisiez '' rgb (0, 255, 255) '===' rgb (0,255,255) ''. Cela aurait pu être une simple capture si vous aviez inclus 'selectedColor' sur le côté' clickedColor' console.log – nilobarp