6 cases sont déclarées comme éléments de tableau.

J'ai attribué une instruction if pour alerter "correct" si la case correspondant à la couleur RVB du tableau [2] est cliquée et une instruction else pour alerter "incorrect " s'il ne correspond pas à la couleur RVB qui se trouve dans l'élément de tableau [2].

Tout semble correct mais maintenant n'importe quelle couleur sur laquelle je clique alerte "faux" qui n'est pas censé être. Parce que la case 3 qui est contenue dans [2] est destinée à alerter "correct" .

Veuillez m'aider car je peux comprendre pourquoi il n'affiche pas "correct" même lorsque je clique sur la case de droite qui est affectée à [2].

S'il vous plaît, comment dois-je procéder pour cette aide?

// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
  document.body.classList.toggle('body')
}
click.addEventListener('click', change)

// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
  'rgb(255,0,0)',
  'rgb(255,255,0)',
  'rgb(25,0,255)',
  'rgb(25,255,203)',
  'rgb(250,0,0)',
  'rgb(0,255,100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
 
// select grids****************************************************
var square = document.querySelectorAll('.square')

// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
  // add initial listeners to square
  square[i].style.background = colors[i]
  // add clicked listeners to square 
  square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
  });
}
body{
    background: #232323;
}

.body{
    background-color: rgb(45, 174, 206);
}

.square{
    width: 30%;
    background: chocolate;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}

#con{
    max-width: 660px;
    margin: 0 auto;
}

h1{
    color: cornsilk;
    margin: 0 auto;
}
<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Game project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
    <h1> colour <span id="colorDisplay">RGB</span> color  game</h1>
<div id="con">
    <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>
    <button>click me</button>
    
</body>
<script src="game.js"></script>
</html>
0
alabo briggs 16 avril 2018 à 16:19

4 réponses

Meilleure réponse

Les deux variables n'ont pas la même chaîne. La couleur choisie est un RVB sans espace entre les chiffres et la couleur cliquée a une chaîne avec un espace. Javascript se compare à chaque caractère. C'est pourquoi cela échoue. Couleur cliquée: "rgb (250, 0, 0)" Sélectionné: "rgb (250,0,0)". Vérifiez ce violon. J'ai modifié votre code. https://fiddle.jshell.net/c3rmLjgj/

0
CharanbabuKarnam 16 avril 2018 à 13:51

Eh bien, j'ai trouvé le problème en environ 30 secondes en ajoutant un fichier console.log dans l'événement click comme ceci:

square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    console.log(clickedColor + ' VS ' + picked);
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
});

Le résultat en cliquant sur la quatrième case était rgb(250, 0, 0) VS rgb(250,0,0). Le problème est donc que le résultat de this.style.background; est rgb(250, 0, 0) alors que votre tableau a la couleur définie comme rgb(250,0,0), notez l'espacement. Donc, simplement fixer l'espacement de votre tableau de couleurs résoudra votre problème.

Et voici l'exemple de travail:

// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button');
function change () {
  document.body.classList.toggle('body');
}
click.addEventListener('click', change);

// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
  'rgb(255, 0, 0)',
  'rgb(255, 255, 0)',
  'rgb(25, 0, 255)',
  'rgb(25, 255, 203)',
  'rgb(250, 0, 0)',
  'rgb(0, 255, 100)',
];
// picked color****************************************************
var picked = colors[4];
var colourDisplay = document.getElementById('colorDisplay');
colourDisplay.textContent = picked;
 
// select grids****************************************************
var square = document.querySelectorAll('.square');

// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
  // add initial listeners to square
  square[i].style.background = colors[i] ;
  // add clicked listeners to square 
  square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
  });
}
body{
    background: #232323;
}

.body{
    background-color: rgb(45, 174, 206);
}

.square{
    width: 30%;
    background: chocolate;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}

#con{
    max-width: 660px;
    margin: 0 auto;
}

h1{
    color: cornsilk;
    margin: 0 auto;
}
<!-- this game was developed by alabo -->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Game project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
    <h1> colour <span id="colorDisplay">RGB</span> color  game</h1>
<div id="con">
    <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>
    <button>click me</button>
    
</body>
<script src="game.js"></script>
</html>
4
Cata John 16 avril 2018 à 13:37

Le problème est facile à déterminer si vous utilisez un console.log(). Vous verrez que this.style.background contient plus d'informations et pas seulement la couleur d'arrière-plan.

Pour résoudre ce problème, je l'ai changé en this.style.backgroundColor mais cela ne le résout pas complètement. Vous devez supprimer les barres d'espace. Je l'ai fait en utilisant this.style.backgroundColor.split(" ").join("")

// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
  document.body.classList.toggle('body')
}
click.addEventListener('click', change)

// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
  'rgb(255,0,0)',
  'rgb(255,255,0)',
  'rgb(25,0,255)',
  'rgb(25,255,203)',
  'rgb(250,0,0)',
  'rgb(0,255,100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
 
// select grids****************************************************
var square = document.querySelectorAll('.square')

// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
  // add initial listeners to square
  square[i].style.background = colors[i]
  // add clicked listeners to square 
  square[i].addEventListener('click', function () {
    var clickedColor = this.style.backgroundColor.split(" ").join("");
    if(clickedColor == picked){
      alert('correct');
    } else {
      alert('wrong');
    }
  });
}
body{
    background: #232323;
}

.body{
    background-color: rgb(45, 174, 206);
}

.square{
    width: 30%;
    background: chocolate;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}

#con{
    max-width: 660px;
    margin: 0 auto;
}

h1{
    color: cornsilk;
    margin: 0 auto;
}
<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Game project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
    <h1> colour <span id="colorDisplay">RGB</span> color  game</h1>
<div id="con">
    <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>
    <button>click me</button>
    
</body>
<script src="game.js"></script>
</html>
1
zeropublix 16 avril 2018 à 13:33

Vous avez des problèmes d'espacement de rbg(255,0,0). Si vous console.log(this.style.background), vous remarquerez que la valeur est rgb(255, 0, 0) avec des espaces après le ,. J'ai également changé l'une des valeurs de colors[] de rbg(250, 0, 0) à rbg(255, 0, 0) car je pense que c'est une faute de frappe.

// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
  document.body.classList.toggle('body')
}
click.addEventListener('click', change)

// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
  'rgb(255, 0, 0)',
  'rgb(255, 255, 0)',
  'rgb(25, 0, 255)',
  'rgb(25, 255, 203)',
  'rgb(255, 0, 0)',
  'rgb(0, 255, 100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
 
// select grids****************************************************
var square = document.querySelectorAll('.square')

// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
  // add initial listeners to square
  square[i].style.background = colors[i]
  // add clicked listeners to square 
  square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    // console.log("Background: " + this.style.background);
    // console.log("Picked: " + picked);
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
  });
}
body{
    background: #232323;
}

.body{
    background-color: rgb(45, 174, 206);
}

.square{
    width: 30%;
    background: chocolate;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}

#con{
    max-width: 660px;
    margin: 0 auto;
}

h1{
    color: cornsilk;
    margin: 0 auto;
}
<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Game project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
    <h1> colour <span id="colorDisplay">RGB</span> color  game</h1>
<div id="con">
    <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>
    <button>click me</button>
    
</body>
<script src="game.js"></script>
</html>
1
Jimenemex 16 avril 2018 à 13:41