Broken "if" statement in JavaScript code…

Question

I am trying to run this code and everything seems to be working except the if statement. Even though there is a match but it still does not display the correct answer as shown in the code but instead displays the code in else statement.

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>

This is why it's generally a bad idea to mix presentation and data. A better approach would be to attach the click handler only to the correct div and not all of them. — JJJ
– JJJ, Commented Oct 20, 2017 at 5:48
As the answer below suggests you were doing 'rgb(0, 255, 255)' === 'rgb(0,255,255)'. Could have been a simple catch if you had included pickedColor along side clickedColor console.log — nilobarp
– nilobarp, Commented Oct 20, 2017 at 5:51

kyun · Accepted Answer · 2017-10-20 05:48:17Z

3

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>

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

I just added blank..

answered Oct 20, 2017 at 5:48

kyun

10.4k9 gold badges36 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zack Over a year ago

where did you add the blank? @Young Kyun Jin

kyun Over a year ago

@Zack Your typing => rgb(255,0,0); My typing => rgb(255, 0, 0);

suprxd · Accepted Answer · 2017-10-20 06:04:20Z

0

In the if condition you are comparing the two different strings. When you apply this color in rgb() format, the browser formats it with spaces between the color arguments.

You gave: rgb(0,255,0)
In browser: rgb(0, 255, 0)

So, you need to add spaces in your colors array. Change your colors array to this,

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

answered Oct 20, 2017 at 6:04

suprxd

3301 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

Broken "if" statement in JavaScript code…

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related