title: JavaScript checking the background color of a div
body: <p>I have a simple program where you can select a color and fill a box with it. I have a 4x4 grid of boxes(divs) and I want to check if the backgroundColor of all the divs(boxes) has a value, so that when all the boxes are filled with a color the grid resets and all the boxes are blank again. </p>
  
  <p>However, I am having some problems implementing this. My first idea was to check that every div in the array (I've used querySelectorAll) has a backgroundColor 'red' or 'blue'. I've tried to store the backgroundColor of the array item into a variable but that doesn't return the string when I console log it.</p>
  
  <p>I also tried the every() method on the Array but that didn't seem to work.</p>
  
  <p>So my question would be, how do I get the backgroundColor of an element in a nodelist and check to see if that element has a backgroundColor. </p>
  
  <p>Here is my JavaScript code:</p>
  
  <pre><code>var redColor = document.getElementById('red');
  var blueColor = document.getElementById('blue');
  var box = document.querySelectorAll('.box');
  var colorPick = document.getElementById('color picker');
  
  
  let currentColor = [];
  Array.from(box);
  console.log(box);
  
  loadEventListeners();
  
  function loadEventListeners(){
  
    redColor.addEventListener('click', pickRed);
    blueColor.addEventListener('click', pickBlue);
    for (i = 0; i &lt; box.length; i++){
      box[i].addEventListener('click', addColor);
    }
  };
  
  
  function pickRed(e){
  
    currentColor.push('red');
    var textRed = document.createTextNode("You have selected red");
    colorPick.appendChild(textRed);
    console.log(currentColor);
  }
  
  function pickBlue(e){
    currentColor.push('blue')
    console.log(currentColor);
  }
  
  
  function addColor(e){
  
    if (currentColor.slice(-1)[0] === 'blue'){
      e.currentTarget.style.backgroundColor = 'blue'; 
    } else { e.currentTarget.style.backgroundColor = 'red'; 
  
    }
  
  }
  </code></pre>
  
  <p>And here is the HTML I'm using: </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  .container{
  
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 200px;
    display: grid;
    align-items: auto;
    width: 50%;
    margin: auto;
  }
  
  
  .game-grid{
    display: grid;
    grid-template-columns: repeat(4, 100px);
    margin: 0;
  }
  
  #color-picker{
    display: grid;
  
    grid-template-rows: 100px 50px 50px;
  
  }
  
  .box{
    width: 100px;
    height: 100px;
    border: solid 2px;
  }
  
  #red{
    background-color: red;
    width: 50px;
    height: 50px;
  }
  
  #blue {
    background-color: blue;
    width: 50px;
    height: 50px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
  
      &lt;div class="game-grid"&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
        &lt;div id="color picker"&gt;
          &lt;h2&gt;Pick a color!&lt;/h2&gt;
            &lt;div id="red"&gt;&lt;/div&gt;
            &lt;div id="blue"&gt;&lt;/div&gt;
            &lt;div id="green"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you for your help! </p>