If statement in javascript not responding to array elements

Question

6 boxes are declared as array elements.

I assigned an if statement to alert "correct" if the box matching the RGB color of array[2] is clicked and an else statement to alert "wrong" if it does not match the RGB color that is in array element[2].

Everything seems correct but now any colour I click alerts "wrong" which is not meant to be. Because box 3 which is contained in [2] is meant to alert "correct".

Please help me out as I can figure out why it is not displaying "correct" even when I click on the right box which is assigned to [2].

Please how do I go about this help?

// 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>

Did you debug why? console.log(clickedColor, picked)

epascarello
– epascarello

2018-04-16 13:22:26 +00:00
Commented Apr 16, 2018 at 13:22 — epascarello
– epascarello, Commented Apr 16, 2018 at 13:22
It's 'rgb(250, 0, 0)' not 'rgb(250,0,0)' ....

Timothy Lee
– Timothy Lee

2018-04-16 13:32:17 +00:00
Commented Apr 16, 2018 at 13:32 — Timothy Lee
– Timothy Lee, Commented Apr 16, 2018 at 13:32

Cata John · Accepted Answer · 2018-04-16 13:37:17Z

Well i found the issue in about 30 seconds by adding a console.log in the click event like this:

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

The result when clicking on the fourth box was rgb(250, 0, 0) VS rgb(250,0,0). So the problem is that the result of this.style.background; is rgb(250, 0, 0) while your array has the color defined as rgb(250,0,0), notice the spacing. So simply fixing your colors array spacing will fix your issue.

And here is the working example:

// 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>

flx · Accepted Answer · 2018-04-16 13:33:04Z

The Problem is easy to determine if you use some console.log(). You will see that this.style.background contains more information and not only the background-color.

To solve this problem I've changed it to this.style.backgroundColor but that doesn't completly fix it. You have to remove the spacebars. I did that by using 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>

Jimenemex · Accepted Answer · 2018-04-16 13:41:10Z

You have problems in your spacing of rbg(255,0,0). If you console.log(this.style.background) you'll notice that the value is rgb(255, 0, 0) with spaces after the ,. I've also changed one of the values in colors[] from rbg(250, 0, 0) to rbg(255, 0, 0) since I think it's a typo.

// 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>

CharanbabuKarnam · Accepted Answer · 2018-04-16 13:51:59Z

0

The two variables do not have same string. The picked color is a RGB without space between digits and clicked color has a string with space. Javascript compares with each and every character. That's why it is failing. Clicked color: "rgb(250, 0, 0)" Picked : "rgb(250,0,0)". Check this fiddle. I have modified your code. https://fiddle.jshell.net/c3rmLjgj/

answered Apr 16, 2018 at 13:51

CharanbabuKarnam

3662 gold badges5 silver badges19 bronze badges

Collectives™ on Stack Overflow

If statement in javascript not responding to array elements

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related