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: 
That's because `this.style.background` return background color with spaces inside, not the same strings:

```
 colors[1] => "rgb(255,255,0)"

 this.style.background => "rgb(255, 255, 0)"
                                   ^^   ^^ 

```
I would just like to add to the previous comments that simple removal of the white space might not be sufficient for all browsers. Firefox for instance puts slightly longer rule for the background that looks something like this:
`rgb(255, 255, 0) none repeat scroll 0% 0%`

You should account for that too when implementing your solution. Maybe reading the value from `this.style.backgroundColor` is a good idea.