title: HTML Template Doesn't Work with For-In Loop JavaScript
body: <p>EDIT: Here's the JSFiddle for the following question.</p>
  
  <p><a href="http://jsfiddle.net/x28ojg6w/" rel="nofollow">http://jsfiddle.net/x28ojg6w/</a></p>
  
  <p>So I'm trying to activate a template with JavaScript and it wasn't working for a while, and I finally fixed it by changing a For-In loop into a For loop in a seemingly unrelated block of code.</p>
  
  <p>The following code is the For-In loop I changed to a for loop. The commented out code was the original code that didn't work and the uncommented for loop is the now working code. This code was used to change font size for text within all instances of a class element:</p>
  
  <pre><code>var release4 = document.getElementsByClassName("release-4");
  
  // for (item in release4){
  //  release4[item].style.fontSize = "2em";
  // };
  
  for (var i = 0 ; i &lt; release4.length ; i++) {
    release4[i].style.fontSize = "2em";
  }
  </code></pre>
  
  <p>This is the code I used to activate my template. It is not part of the release-4 class:</p>
  
  <pre><code>var tmpl = document.getElementById('hidden');
  document.body.appendChild(tmpl.content.cloneNode(true));
  </code></pre>
  
  <p>And here is the HTML that goes with it:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Manipulate the DOM&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="release-0"&gt;
      &lt;p class="release-4"&gt; Here is some text, add a class "done" to the parent div&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="release-1"&gt;
      &lt;p&gt;remove the #release-1 div&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;h1&gt;Change this text to finish release 2&lt;/h1&gt;
  
    &lt;div id="release-3"&gt;
      &lt;p class="release-4"&gt; add CSS to this div&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;template id="hidden"&gt;
      &lt;div&gt;
        &lt;h1&gt; Congrats! You finished the challenge.&lt;/h1&gt;
        &lt;img src="http://media.giphy.com/media/2UpzC3iPenf44/giphy.gif"&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  
  &lt;script type="text/javascript" src="home_page.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My question is why did changing the For loop make a difference? Thanks everyone!</p>
  
  <p>All other code in the JS file only affect IDs release-0, release-1, and release-3, and the h1 tag. The class name, display, innerHTML, and background color were the only changes made to them.</p>