I get the alert as wrong.Any other logic if I want to compare the clickedcolor is equal to pickedcolor?

Question

This is my code for a function where I want to check if I picked the correct color of the square on my html page to my pre-selected color of the choice (in the given case it is color[5])

But I always get the answer as wrong, as I checked that.

Even if I use

var check = (clickedColor === pickedColor);
alert(check);

the above code returns false every-time.

I can't find where my logic is going wrong. Here is my code:-

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

var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var pickedColor = colors[5];
colorDisplay.textContent = pickedColor;
Squaref();


function Squaref() {
  for (var i = 0; i < squares.length; i++) {
    ///////populate
    squares[i].style.background = colors[i];
    ////// check picked colors
    squares[i].addEventListener("click", function() {
      //////grab
      var clickedColor = this.style.background;
      ////////compare
      if (clickedColor === pickedColor) {
        alert(correct);
      } else {
        alert("Wrong");
      }
    });
  };
};

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

<div id="colorDisplay"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

Answer 1

First of all, you need to use this.style.backgroundColor instead of this.style.background, and the output of that has spaces between the values (rgb(255, 0, 0)), so you will either have to add spaces to the values in your colors array or use the #ff0000 format.

And you have to alert "correct", not correct: alert("correct");

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

var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var pickedColor = colors[5];
colorDisplay.textContent = pickedColor;
Squaref();


function Squaref() {
  for (var i = 0; i < squares.length; i++) {
    ///////populate
    squares[i].style.background = colors[i];
    ////// check picked colors
    squares[i].addEventListener("click", function() {
      //////grab
      var clickedColor = this.style.backgroundColor;
      ////////compare
      if (clickedColor === pickedColor) {
        alert("correct");
      } else {
        alert("Wrong");
      }
    });
  };
};

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

<div id="colorDisplay"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>