this.style.background is returning wrong value <p>I am trying to create an RGB color guessing game. The premise is that each time someone clicks on a div, the function should retrieve it's color value and match it with the random color value(pre-selected) out of a given number of color values.</p> <p>Now, the game has two difficulty levels. Easy and hard. The code for the two levels is almost same, the number of color divs in easy are 3, while in the case of hard, the number of color divs is 6.</p> <p>However, while in easy mode, the function is retrieving a color value which belongs to none of the three divs. In fact, it is returning the background color value.</p> <p>Here is the code</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code> var colors = randomColors(6); var easyColor = []; var squares = document.querySelectorAll(".square"); function color() { var a = Math.floor(Math.random()*250); var b = Math.floor(Math.random()*250); var c = Math.floor(Math.random()*250); return "rgb("+ [(a),(b),(c)].join(', ') + ")"; } function randomColors(num) { var arr = []; for(var i =0; i &lt; num; i++) { arr.push(color()); } return arr; } // Tried to generate different set of colors for easy mode. Still working on it. for(var x = 0; x &lt; 3; x++) { easyColor[x] = color(); } var easyRandomColor = easyColor[Math.floor(Math.random()*easyColor.length)]; // selecting hard difficulty works same as playing again, hence the reload() document.getElementById("hard").addEventListener("click", function() { window.location.reload(); }); document.getElementById("reset").addEventListener("click", function() { window.location.reload(); }); var squareColor; // setting up the easy level of the game document.getElementById("easy").addEventListener("click", function() { document.getElementById("header").style.background = "#232323"; for(var y = 0; y &lt; 3; y++) { squares[y].style.background = easyColor[y]; } for(var z = 3; z &lt; 6; z++) { squares[z].style.background = "#232323"; } easyRandomColor = easyColor[Math.floor(Math.random()*easyColor.length)]; document.getElementById("guess").textContent = easyRandomColor; // setting up the background colors of easy level squares for(var j = 0; j &lt; easyColor.length; j++) squares[j].addEventListener("click", function() { squareColor = this.style.background; console.log(squareColor, easyRandomColor); if(squareColor === easyRandomColor) { document.getElementById("header").style.background = name; document.getElementById("display").textContent = "Correct!"; document.getElementById("reset").textContent = "Play again?"; for(var k = 0; k &lt; easyColor.length; k++) { squares[k].style.background = name; } } else{ this.style.background = "#232323"; document.getElementById("display").textContent = "Try again."; } }); document.getElementById("easy").classList.add("selected"); document.getElementById("hard").classList.remove("selected"); }); var randomColor = colors[Math.floor(Math.random()*colors.length)]; //changing the RGB in h1 to rgb of one the squares document.getElementById("guess").textContent = randomColor; //assigning colors to the squares and adding the click event for(var j = 0; j &lt; squares.length; j++) { squares[j].style.background = colors[j]; squares[j].addEventListener("click", function() { var name = this.style.background; // console.log(name, randomColor); if(name === randomColor) { document.getElementById("header").style.background = name; document.getElementById("display").textContent = "Correct!"; document.getElementById("reset").textContent = "Play again?"; for(var k = 0; k &lt; squares.length; k++) { squares[k].style.background = name; } } else{ this.style.background = "#232323"; document.getElementById("display").textContent = "Try again."; } }); }</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background-color: #232323; margin: 0; } html { margin: 0; padding: 0; } .square { width: 30%; /*background: purple;*/ padding-bottom: 30%; float: left; margin: 1.66%; transition: 0.2s ease-in; border-radius: 6%; } #container { margin: 0 auto; max-width: 600px; } h1, h3 { color: white; padding-top: 1%; padding-bottom: 0.5%; margin-top: 0; margin-bottom: 0; text-align: center; } #header { transition: 0.2s ease-in; } #nav { margin-top: 0; padding-top: 0; background: white; max-width: 100%; clear: left; } #nav p { margin: 0 auto; position: relative; max-width: 580px; } #reset { position: relative; } #hard { position: absolute; right: 0; } #easy { position: absolute; right: 50px; } #display { position: relative; left: 27%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;RGBA Guess&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="colorgame.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;h3&gt; The Great &lt;/h3&gt; &lt;h1&gt; &lt;span id="guess"&gt;number&lt;/span&gt; &lt;/h1&gt; &lt;h3&gt; Guessing Game &lt;/h3&gt; &lt;/div&gt; &lt;div id="nav"&gt; &lt;p&gt; &lt;button id="reset"&gt;New Colors&lt;/button&gt; &lt;span id="display"&gt;&lt;/span&gt; &lt;button id="easy"&gt;Easy&lt;/button&gt; &lt;button id="hard" class="selected"&gt;Hard&lt;/button&gt; &lt;/p&gt; &lt;/div&gt; &lt;div id="container"&gt; &lt;div class="square" id="sqaure1"&gt;&lt;/div&gt; &lt;div class="square" id="sqaure2"&gt;&lt;/div&gt; &lt;div class="square" id="sqaure3"&gt;&lt;/div&gt; &lt;div class="square" id="sqaure4"&gt;&lt;/div&gt; &lt;div class="square" id="sqaure5"&gt;&lt;/div&gt; &lt;div class="square" id="sqaure6"&gt;&lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript" src="colorgame.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p> <p>I know, there is a better way to do this. I can instead call the randomColors(3) in easy mode, but I want to know what is it that I am doing wrong so that I can avoid it in the future.</p> <p>Than You</p>