title: getElementsByClassName() not working
body: <p><strong>I know there is a lot of getElementsByClassName() questions on this page, but I cannot get a single one of them to work, so i just post this here and hope to bring a general answer..</strong></p>
  
  <p>My problem is that I need to change an item's css 'display' state when a button is clicked, but i can't get it to work. I made a fiddle <a href="http://jsfiddle.net/z6m8u591/5/" rel="nofollow">here</a> showing the code.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="body"&gt;&lt;/div&gt;
  &lt;input type="button" value="Click me!" onclick="display()"&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.body {
  height:100px;
  width:100px;
  background-color: red;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>function display () {
    var elems = document.getElementsByClassName('body');
    for (var i = 0; i &lt; elems.length; i++) {
      elems[i].style.display = 'none';
    }
  }
  </code></pre>