JS Class List Not Working

Question

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.

java script

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);
    }
}

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.

PS sorry if I have formatted this post wrong, im new to the site.

EDIT: Here is one of the HTML items I am trying to filter.

<div class="separator" 
id="game_filter"
class="game_filter_show"
class="games_all" 
class="games_fps" 
style="clear: both; text-align: center;">
<a class="GameList" href="http://foo.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://foo.png /></a></div>

Here is the html for the buttons.

<div style="text-align: center;">
<span style="font-size: large;">
<button onclick="allFunction()">All Games</button>
<button onclick="fpsFunction()">First Person Shooters</button>
<button onclick="survivalFunction()">Survival Games</button>
</span></div>

Answer 1

Tested this code and it looks it works, unless you want something else to be done.

    <div class="games_survival" id="game_filter"></div>
    <div id="element"></div>

    <div onclick="allFunction()">all</div>
    <div onclick="fpsFunction()">fps</div>
    <div onclick="survivalFunction()">survivval</div>

<script>
var element = document.getElementById("element");
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);
    }
}
</script>

and here is a plunk to show how it works

Maybe you filter items depending on classes placed on them, then

   <style>
  .game_filter_show {color: red; } 
  .game_filter_hide{background-color: blue;}
  </style>

    <div class="element games_survival">text in here1</div>
    <div class="element games_fps">text in here2</div>

    <div onclick="allFunction()">all</div>
    <div onclick="fpsFunction()">fps</div>
    <div onclick="survivalFunction()">survivval</div>

<script>
function allFunction() {
var elements = document.getElementsByClassName("element");

      elements = Array.prototype.slice.call(elements,0);
    elements.map(function(element){
          element.classList.toggle("game_filter_show", true);
          element.classList.toggle("game_filter_hide", false);
    })
}

function fpsFunction() {
var elements = document.getElementsByClassName("element");
      elements = Array.prototype.slice.call(elements,0);
    elements.map(function(element){
      if (element.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 elements = document.getElementsByClassName("element");
      elements = Array.prototype.slice.call(elements,0);
    elements.map(function(element){
      if (element.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);
    } 
    })
}
</script>

and another plunker EDIT: remove games_all class checking, or you could add games_all o every item in the list, but this would be easier.