我在事件监听器中的变量是未定义的

Question

当我点击正确的颜色时，我制作了一组rgb颜色和一个点击事件监听器来提醒我。代码看起来像我的数组。

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

 var colorDisplay = document.getElementById('colorDisplay');
 colorDisplay.textContent = pickedColor;

 for (var i = 0; i < squares.length; i++) {
     //add initial colors to squares
     squares[i].style.backgroundColor = colors[i];

     // add click listeners to squares
     squares[i].addEventListener('click', function () {
         //grab color of clicked square
         var clickedColor = this.style.background;
         //compare color to pickedColor

         if (clickedColor == pickedColor) {
             alert('sdfsdfsd');
         } else {
             alert(clickedColor.text);
         }
     });
 }

在我的if函数上只有else传递了，当clickedColor ==拾取颜色时我永远不会得到第一个警告，在clickedcolor.text上做一个警告显示它是未定义的。我不确定如何解决这个问题并且不确定它是否是浏览器问题，我使用的是firefox版本57.