Question: if statement not working properly, always showing result of the else statement .
i want to be alerted correct when the second box is clicked but it always alert wrong aka the else statement.
i am new in these things and getting hard time figuring it out.

```js
var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)"];

var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];

for(var i=0;i<squares.length;i++)
{
 squares[i].style.background=colors[i];

 squares[i].addEventListener("click", function(){
  var clickedColor = this.style.background;
  if(clickedColor === pickedColor){
   alert("correct");
  }
  else{
   alert("wrong");
  }
 });
}
```

```css
.square{
 width: 10%;

 padding-bottom: 10%;
 float: left;
 margin: 1.66%;
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>color game</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="square"></div>
 <div class="square"></div>
 <script type="text/javascript" src="script.js"></script>
</body>
</html>
```

Answer: 
As you can see the `clickedColor` and `pickedColor` is not the same, it's having spaces in between.

So to **remove spaces**, add the below code.

```
var clickedColor = this.style.backgroundColor.replace(/\s/g, '');

```

---

```js
var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)"];

var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];

for(var i=0;i<squares.length;i++)
{
 squares[i].style.background=colors[i];

 squares[i].addEventListener("click", function(){
  var clickedColor = this.style.backgroundColor.replace(/\s/g, '');
    console.log([clickedColor.replace(/\s/g, ''),pickedColor]);
  if(clickedColor == pickedColor){
   alert("correct");
  }
  else{
   alert("wrong");
  }
 });
}
```

```css
.square{
 width: 10%;

 padding-bottom: 10%;
 float: left;
 margin: 1.66%;
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>color game</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="square"></div>
 <div class="square"></div>
 <script type="text/javascript" src="script.js"></script>
</body>
</html>
```
The reason for this is that the string you try to compare does not match.

"rgb(255,255,0)" vs "rgb(255, 255, 0)".

You can either change your strings in your array:

```
 var colors = [
    "rgb(255, 0, 0)",
    "rgb(255, 255, 0)"
];

```

or (better imo): remove the spaces from what you retreive:

```
var clickedColor = this.style.background.replace(/\s/g, '');

```

See the below snippet to show the difference in strings:

```js
var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)"];

var squares = document.querySelectorAll(".square");
var pickedColor = colors[1];

for(var i=0;i<squares.length;i++)
{
 squares[i].style.background=colors[i];
 squares[i].addEventListener("click", function(){
  var clickedColor = this.style.background;
        console.log(pickedColor);
        console.log(clickedColor);
  if(clickedColor === pickedColor){
   alert("correct");
  }
  else{
   alert("wrong");
  }
 });
}
```

```css
.square{
 width: 10%;

 padding-bottom: 10%;
 float: left;
 margin: 1.66%;
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>color game</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="square"></div>
 <div class="square"></div>
 <script type="text/javascript" src="script.js"></script>
</body>
</html>
```