title: DIVs change color by "click" with event handler
body: <p>I want to create an event where the DIVs are clicked and they change to a random color. I'm fairly confident that this is the general setup, but I'm just overlooking some small error(s)...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;style&gt;
      .square {
          width: 100px;
          height: 100px;
          background-color: #000000;
          margin: 5px;
      }
  &lt;/style&gt;
  
  &lt;div id="container"&gt;
      &lt;div class="square"&gt;&lt;/div&gt;
      &lt;div class="square"&gt;&lt;/div&gt;
      &lt;div class="square"&gt;&lt;/div&gt;
      &lt;div class="square"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var squareRef = document.getElementById("container");
  
  for(var i = 0; i &lt; squareRef.length; i++) {
      squareRef[i].addEventListener("click", changeColor);
  }
  
  function changeColor(event) {
      event.target.style.backgroundColor = "randomColor()";
  }
  
  
  function randomColor() {
      var randomRed = Math.floor(Math.random() * 255);
      var randomGreen = Math.floor(Math.random() * 255);
      var randomBlue = Math.floor(Math.random() * 255);
      //create the string that is the ‘random color’
      var randomColor = "rgb("+randomRed+","+randomGreen+","+randomBlue+")";
  
      return randomColor;
  }
  </code></pre>