title: Javascript function not triggering on button click
body: <p>Here is the code:</p>
  
  <pre><code>&lt;script&gt;
  function myFunction() {
  var x = document.getElementById("myDIV");
  var y = x.getElementsByClassName("child");
  var i;
  for (i = 0; i &lt; y.length; i++) {
      y[i].style.backgroundColor = "red";
      }
  }
  &lt;/script&gt;
  &lt;style&gt;
  div {
      border: 1px solid black;
      margin: 5px;
  }
  &lt;/style&gt;
  
  &lt;div id="myDIV"&gt;
    &lt;p class="child"&gt;A p element with class="child" in a div.&lt;/p&gt;
    &lt;p class="child"&gt;Another p element with class="child" in a div.&lt;/p&gt;
    &lt;p&gt;A p element in div with a &lt;span class="child"&gt;span element with class="child"&lt;/span&gt; inside of it.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Click the button to add a background color to all elements with class="child" inside the div element with id="myDIV".&lt;/p&gt;
  
  &lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/jmgrant15/3dcof7ox/14/" rel="nofollow">https://jsfiddle.net/jmgrant15/3dcof7ox/14/</a></p>
  
  <p>The "child" classes are supposed to turn red on the button click. Any thoughts why this isn't working?</p>
  
  <p>Thanks!</p>