Color Guessing Game returns False, even when I select the correct color

Question

Color Guessing Game returns False, even when I select the correct color

Trying to make a Color Guessing game using JS.Console does not show me any errors, but it warns me "Wrong!". even when I choose the right number, when he needs to warn “Right!” ... I tried to solve this problem for about three hours!

If I delete else{ alert ("Wrong!") }and then click on the color, there will be no callback at all. Also, if I type the console square[i].style.background, it will return me

undefined

Here is my code:

var colors = [ 
     "rgb(255,0,0)",
     "rgb(255,255,0)",
     "rgb(0,255,0)",
     "rgb(0,255,255)",
     "rgb(0,0,225)",
     "rgb(255,0,255)"
    ]
    var squares = document.querySelectorAll(".square");
    var pickedColor = colors [3];
    var colorDisplay = document.getElementById("colorDisplay"); 
     colorDisplay.textContent = pickedColor;

    for(var i = 0; i <squares.length;i++){ 
        // add initial colors to squares
        squares[i].style.background = colors[i];
        // add click listeners to squares
        squares[i].addEventListener ("click",function() {
        // grab color of clicked square
        var clickedColor = this.style.background;
        // compare color to pickedColor
        if(clickedColor === pickedColor){ 
            alert("Correct!");
        } else {
            alert("Wrong!")
        }
        });
     }

And here is my html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Color Game</title>
    <link rel="stylesheet" type="text/css" 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 src="colorGame.js"></script>
</body>


</html>

+4

javascript

Levan sharvadze Aug 2 '17 at 13:29

source share

2 answers

SpaceNinjaApe · Answer 1 · 2017-08-02T13:37:09+0000

You used style.background. You have to usestyle.backgroundColor

The property style.backgroundcontains:

background color
background-repeat
-

Khauri McClain · Answer 2 · 2017-08-02T13:43:14+0000

, this.style.background , , , ( Chrome). .

, ( ), ( - ), , . , .

var colors = [ 
     "rgb(255,0,0)",
     "rgb(255,255,0)",
     "rgb(0,255,0)",
     "rgb(0,255,255)",
     "rgb(0,0,225)",
     "rgb(255,0,255)"
    ]
    var squares = document.querySelectorAll(".square");
    var pickedColor = colors [3];
    var colorDisplay = document.getElementById("colorDisplay"); 
     colorDisplay.textContent = pickedColor;

    for(var i = 0; i <squares.length;i++){ 
        // add initial colors to squares
        squares[i].style.background = colors[i];
        // add as class
        squares[i].classList.add(colors[i]);
        // add click listeners to squares
        squares[i].addEventListener ("click",function() {
          // compare color to pickedColor
          if(this.classList.contains(pickedColor)){ 
              alert("Correct!");
          } else {
              alert("Wrong!")
          }
        });
     }

.square{
  width : 100px;
  height : 100px;
}

<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 id="colorDisplay" />

Color Guessing Game returns False, even when I select the correct color

More articles: