Having a JS Error with my filter system in html

Question

Hi im having problems with my html filter system.

This is the Error:

Uncaught TypeError: Cannot read property 'getElementsByClassName' of null at scripts.js:40

The system works but i want the error to be fixed

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}


function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}


function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}


var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btnContainer[i].innerHTML = Quotes[x]
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

body {
  background-color: #383838;
}

.Navbar {
  background-color: rgb(26, 25, 25);
  overflow: hidden;
  margin: -16px -8px;
}

.Navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  padding: 18px 20px;
  font-size: 15px;
  font-family: Arial;
  font-weight: bold;
  line-height: 20px;
}

.Navbar a:hover {
  background-color: #333;
  color: #f2f2f2;
}

.container {
  overflow: hidden;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
}

.filterDiv {
  float: left;
  background-color: rgb(26, 25, 25);
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 4px;
  display: none;
  /* Hidden by default */
}


/* The "show" class is added to the filtered elements */

.show {
  display: hide;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: rgb(31, 31, 31);
  cursor: pointer;
  color: white;
  font-family: Arial;
}


/* Add a light grey background on mouse-over */

.btn:hover {
  background-color: rgb(46, 46, 46);
}


/* Add a dark background to the active button */

.btn.active {
  background-color: #666;
  color: rgb(31, 31, 31);
}

.navbar2 {
  background-color: rgb(31, 31, 31);
  overflow: hidden;
  height: 40px;
  margin: 16px -8px;
}

a {
  text-decoration: none;
}

h1 {
  font-family: Arial;
  text-align: center;
  color: white;
}

.uiltje {
  margin: 20px -8px;
}

<div id="myBtnContainer">
  <button class="btn" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('games')"> Games</button>
  <button class="btn" onclick="filterSelection('ai')"> AI</button>
  <button class="btn" onclick="filterSelection('tools')"> Tools</button>
</div>


<div class="container">
  <div class="filterDiv tools">Slimleren</div>
  <div class="filterDiv games">SampleGame</div>
  <div class="filterDiv ai">SampleTool</div>


</div>

I made you a snippet. Please start fixing some of the console errors - first one is missing `Quotes` — mplungjan, Apr 02 '20 at 07:13
^ If you then define `Quotes = [];`, the next error is 'x' is also not defined. — Sl4rtib4rtf4st, Apr 02 '20 at 07:20
The error is clear: `btnContainer` is `null` hence `.getElementById("myBtnContainer")` hasn't found an element with such an id. Most likely -> [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Andreas, Apr 02 '20 at 07:20
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — phuzi, Apr 02 '20 at 07:30

mplungjan · Answer 1 · 2020-04-02T08:09:21.400

This is a strange statement

btnContainer[i].innerHTML = Quotes[x]

if it had worked, your buttons would disappear

To use my code below you need to

REPLACE the onclicks with a data-attribute called data-select AND add active to the "all" button
change the sample divs to match their classes
remove display: none; /* Hidden by default */ from filterDiv class
change .show to .hide

like this

.hide {
  display: none;
}

Full code

const filterSelection = sel => { // passing a string 
  [...document.querySelectorAll(".filterDiv")].forEach(div => {
    div.classList.toggle("hide",
      sel !== "all" && !div.classList.contains(sel) // hide if not "all" and no match
    )
  })
};
window.addEventListener("load", function() { // when the page loads
  const btnContainer = document.getElementById("myBtnContainer");
  // btnContainer.innerHTML += Quotes[0]; // was x
  btnContainer.addEventListener("click", function(e) { // any click on the button container
    const tgt = e.target; 
    if (tgt.classList.contains("btn")) { // check if tgt is a button
      filterSelection(tgt.getAttribute("data-select")); // grab the attribute
      const current = document.querySelector(".btn.active"); // get the active
      current.classList.remove("active"); // remove the active
      tgt.classList.add("active"); // add active to button clicked
    }
  })
})
filterSelection("all");

 body {
    background-color: #383838;

}



.Navbar {
background-color: rgb(26, 25, 25);
overflow: hidden;
margin: -16px -8px;
}


.Navbar a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    padding: 18px 20px;
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    line-height: 20px;
}

.Navbar a:hover {
    background-color: #333;
    color: #f2f2f2;
} 


.container {
    overflow: hidden;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
  }
  
  .filterDiv {
    float: left;
    background-color: rgb(26, 25, 25);
    color: #ffffff;
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin: 4px;
    /* display: none; */ /* Hidden by default */ 
  }



  .hide {
    display: none;
  }
  
  /* Style the buttons */
  .btn {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: rgb(31, 31, 31);
    cursor: pointer;
    color: white;
    font-family: Arial;
  }
  
  /* Add a light grey background on mouse-over */
  .btn:hover {
    background-color: rgb(46, 46, 46);
  }
  
  /* Add a dark background to the active button */
  .btn.active {
    background-color: #666;
    color: rgb(31, 31, 31);
  }

  .navbar2 {
    background-color: rgb(31, 31, 31);
    overflow: hidden;
    height: 40px;
    margin: 16px -8px;
  }





  a {
      text-decoration: none;



  }

  h1 {
      font-family: Arial;
      text-align: center;
      color: white;



  }

  .uiltje {
      margin: 20px -8px;




  }

<div id="myBtnContainer">
  <button class="btn active" data-select="all"> Show all</button>
  <button class="btn" data-select="games"> Games</button>
  <button class="btn" data-select="ai"> AI</button>
  <button class="btn" data-select="tools"> Tools</button>
</div>


<div class="container">
  <div class="filterDiv tools">Sample Tool</div>
  <div class="filterDiv games">Sample Game</div>
  <div class="filterDiv ai">Sample AI</div>
</div>

I have re-written your code. You can replace all your code with the above and remove the onclick from the buttons — mplungjan, Apr 02 '20 at 07:40
I cannot tell because you did not post your CSS. As you can see my code works on your HTML after I changed the `onclick="filterSelection('somestring')"` to `data-select="somestring"` AND added `active` to `all` button — mplungjan, Apr 02 '20 at 07:46
@Roanus Please just edit your question, scroll down click edit above snippet and paste the CSS in the CSS pane — mplungjan, Apr 02 '20 at 07:51
Yeah, but why not add it where I suggested in YOUR question? I updated your question AND updated my answer. I have removed one line of CSS from filterDiv and replaced your .show with the class .hide — mplungjan, Apr 02 '20 at 08:03

score -1 · Answer 2 · answered Jun 11 '20 at 21:51

-1

You should put js code in footer after html code

answered Jun 11 '20 at 21:51

Anton

1

Could you please elaborate on that? It isn't very clear what you mean, because there is no detail. – 10 Rep Jun 11 '20 at 22:23

Having a JS Error with my filter system in html

2 Answers2