title: How would I make the color of squares change when they are clicked using Javascript?
body: <p>I have written it out using an event listener but it does not work and the squares remain black even when they are clicked. I found a few typos that I fixed but I am not sure whether I was correct in using <code>getElementsByClassName</code>.</p>
  <p>html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
      .square {
          width: 100px;
          height: 100px;
          background-color: #000000;
          margin: 5px;
       }
     &lt;/style&gt;
    &lt;/head&gt;
   &lt;body&gt;
  
   &lt;div id=&quot;container&quot;&gt;
   &lt;div class=&quot;square&quot;&gt;&lt;/div&gt;
   &lt;div class=&quot;square&quot;&gt;&lt;/div&gt;
   &lt;div class=&quot;square&quot;&gt;&lt;/div&gt;
   &lt;div class=&quot;square&quot;&gt;&lt;/div&gt;
   &lt;/div&gt;
  
  &lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>and Javascript:</p>
  <pre><code>var squares = document.getElementsByClassName('square');
  
  for(var i = 0; i &lt; squares.length; i++) {
  squares[0].addEventListener(&quot;click&quot;, changeColor);
  }
  
  function changeColor(event) {
  event.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 = &quot;rgb(&quot;+randomRed+&quot;,&quot;+randomGreen+&quot;,&quot;+randomBlue+&quot;)&quot;;
  
  return randomColor;
  }
  </code></pre>