title: How can I filter elements with pure javascript?
body: <h2>Problem</h2>
  
  <p>I made a little script that let's checkboxes filter elements on their classnames. It kinda works, but it all crashes when I click a checkbox that's not the first or second one. I don't see why but it just does. Could someone point me in the right direction?</p>
  
  <h2>Code</h2>
  
  <p>A <a href="http://jsfiddle.net/0dqcLjcu/3/" rel="nofollow">fiddle</a>.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="filters"&gt;
      Filters:
      &lt;input type="checkbox" class="filter" id="cat1-filter" data-filter="cat1"&gt;
      &lt;label for="cat1-filter"&gt;category 1&lt;/label&gt;
  
      &lt;input type="checkbox" class="filter" id="cat2-filter" data-filter="cat2"&gt;
      &lt;label for="cat2-filter"&gt;category 2&lt;/label&gt;
  
      &lt;input type="checkbox" class="filter" id="cat3-filter" data-filter="cat3"&gt;
      &lt;label for="cat3-filter"&gt;category 3&lt;/label&gt;
  
      &lt;input type="checkbox" class="filter" id="cat4-filter" data-filter="cat4"&gt;
      &lt;label for="cat4-filter"&gt;category 4&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;a href="#" class="item cat1"&gt;
      &lt;h3&gt;Item 1&lt;/h3&gt;
  &lt;/a&gt;
  
  &lt;a href="#" class="item cat1 cat3"&gt;
      &lt;h3&gt;Item 2&lt;/h3&gt;
  &lt;/a&gt;
  
  &lt;a href="#" class="item cat2"&gt;
      &lt;h3&gt;Item 3&lt;/h3&gt;
  &lt;/a&gt;
  
  &lt;a href="#" class="item cat1 cat2 cat4"&gt;
      &lt;h3&gt;Item 4&lt;/h3&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The Javascript:</p>
  
  <pre><code>// Make filters react
  var filters = document.getElementsByClassName('filter');
  for (var i = 0; i &lt; filters.length; i++) {
      filters[i].addEventListener('change', filter);
  };
  
  function filter () {
      // Hide all posts by default
      var posts = document.getElementsByClassName('item');
      for (var i = 0; i &lt; posts.length; i++) {
          posts[i].style.display = 'none';
      };
  
      // Run through all filters
      for (var i = 0; i &lt; filters.length; i++) {
          // Check if filter is active
          if (filters[i].checked){
              // Get current filter name
              var curFilter = filters[i].getAttribute('data-filter');
              // Get all matching elements
              var visiblePosts = document.getElementsByClassName(curFilter);
              for (var i = 0; i &lt; visiblePosts.length; i++) {
                  // Show every matching element
                  visiblePosts[i].style.display = 'inline-block';
              };
          }
      };
  }
  </code></pre>