title: JS Class List Not Working
body: <p>so I am trying to make a page on my blog that has a list of the games that I have posts about and I am trying to make a filter to help people find games based on classes.  I am using buttons with onclick="myFuntion()" but for some reason I cant seem to get it to work.  I am pretty rusty with js but I think the logic is sound and should be working.</p>
  
  <p>java script</p>
  
  <pre><code>function allFunction() {
      var filter = document.getElementById("game_filter");
  
      if (filter.classList.contains("games_all")) {
          element.classList.toggle("game_filter_show", true);
          element.classList.toggle("game_filter_hide", false);
      }
  }
  
  function fpsFunction() {
      var filter = document.getElementById("game_filter");
  
      if (filter.classList.contains("games_fps")) {
          element.classList.toggle("game_filter_show", true);
          element.classList.toggle("game_filter_hide", false);
      } else {
          element.classList.toggle("game_filter_show", false);
          element.classList.toggle("game_filter_hide", true);
      }
  }
  
  function survivalFunction() {
      var filter = document.getElementById("game_filter") {
  
      if (filter.classList.contains("games_survival")) {
          element.classList.toggle("game_filter_show", true);
          element.classList.toggle("game_filter_hide", false); 
      } else {
          element.classList.toggle("game_filter_show", false);
          element.classList.toggle("game_filter_hide", true);
      }
  }
  </code></pre>
  
  <p>From what I can tell this should be working but its not and I am about to give up and just leave the filter out if i cant figure this out soon.</p>
  
  <p>PS sorry if I have formatted this post wrong, im new to the site.</p>
  
  <p>EDIT: Here is one of the HTML items I am trying to filter.</p>
  
  <pre><code>&lt;div class="separator" 
  id="game_filter"
  class="game_filter_show"
  class="games_all" 
  class="games_fps" 
  style="clear: both; text-align: center;"&gt;
  &lt;a class="GameList" href="http://foo.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" src="http://foo.png /&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  
  <br />
  
  <p>Here is the html for the buttons.</p>
  
  <pre><code>&lt;div style="text-align: center;"&gt;
  &lt;span style="font-size: large;"&gt;
  &lt;button onclick="allFunction()"&gt;All Games&lt;/button&gt;
  &lt;button onclick="fpsFunction()"&gt;First Person Shooters&lt;/button&gt;
  &lt;button onclick="survivalFunction()"&gt;Survival Games&lt;/button&gt;
  &lt;/span&gt;&lt;/div&gt;
  </code></pre>