Type error in javascript code for making a filter

Question

I change my method and to make a selector with button so i do this :

the purpose of this code is to display, by clicking, the images corresponding to a button knowing that there are several images with different names HTML code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <script src="index.js"></script>
    <div id="btnconteneur">
        <button class="btn active" onclick="filter('all')">Show all</button>
        <button class="btn" onclick="filter('AttributionCodeConfidentiel')">Attribution Code confidentiel</button>
        <button class="btn" onclick="filter('bis')">Bis</button>
    </div>
    <div class="conteneur">
       <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel.png" alt="" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201706.png" alt="201706" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201707.png" alt="201707" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201708.png" alt="201708" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201709.png" alt="201709" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201710.png" alt="201710" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201711.png" alt="201711" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201712.png" alt="201712" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201801.png" alt="201801" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201802.png" alt="201802" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201803.png" alt="201803" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201804.png" alt="201804" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201805.png" alt="201805" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201806.png" alt="201806" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201807.png" alt="201807" /></div>
        <div class=" filtre AttributionCodeConfidentiel"><img src="test/AttributionCodeConfidentiel_201808.png" alt="201808" /></div>
        <div class=" filtre bis"><img src="test/bis.png" alt="" /></div>
        <div class=" filtre bis"><img src="test/bis_201706.png" alt="201706" /></div>
        <div class=" filtre bis"><img src="test/bis_201707.png" alt="201707" /></div>
        <div class=" filtre bis"><img src="test/bis_201708.png" alt="201708" /></div>
        <div class=" filtre bis"><img src="test/bis_201709.png" alt="201709" /></div>
        <div class=" filtre bis"><img src="test/bis_201710.png" alt="201710" /></div>
        <div class=" filtre bis"><img src="test/bis_201711.png" alt="201711" /></div>
        <div class=" filtre bis"><img src="test/bis_201801.png" alt="201801" /></div>
        <div class=" filtre bis"><img src="test/bis_201802.png" alt="201802" /></div>
        <div class=" filtre bis"><img src="test/bis_201803.png" alt="201803" /></div>
        <div class=" filtre bis"><img src="test/bis_201804.png" alt="201804" /></div>
        <div class=" filtre bis"><img src="test/bis_201805.png" alt="201805" /></div>
        <div class=" filtre bis"><img src="test/bis_201806.png" alt="201806" /></div>
        <div class=" filtre bis"><img src="test/bis_201807.png" alt="201807" /></div>
        <div class=" filtre bis"><img src="test/bis_201808.png" alt="201808" /></div>
</body>
</html>

and my javascript :

function filter(c) {
  var x, i;
  x = document.getElementsByClassName("filtre");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
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];
    }
  }
}

// Hide elements that are not selected
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(" ");
}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById('btnconteneur');
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Everything seems OK, but when I run I have the error:

TypeError: document.getElementById(...) is null

And i dont understand why igot this error :(

score 1 · Answer 1 · answered Aug 31 '18 at 12:22

1

With your script index.js being included at the beginning of the body tag, it gets executed, and when it run across var btnContainer = document.getElementById('btnconteneur');, it does not find the element and it returns null.

Hence, you should include the index.js just before the end of body tag so that all the elements are available at the time of execution of script.

<script src="index.js"></script>
</body>

answered Aug 31 '18 at 12:22

Nikhil Aggarwal

26,884
3
37
53

Oh i dont know that the position of the "script" balise was important and so thanks to you :) now my button function doesnt work and i have to see why ^^ – Julien Bensliman Aug 31 '18 at 12:51
all is working now ^^ i just forgot to put some css code lol thank to you ;) – Julien Bensliman Aug 31 '18 at 13:23
@JulienBensliman - Glad to help you! – Nikhil Aggarwal Aug 31 '18 at 13:24

score 0 · Accepted Answer · answered Aug 31 '18 at 12:30

As of what i understood you are having the get getElementById and getElementsByClassName before even rendering the HTML if you want them later you can call it with a function or try loading the JS file after the HTML content loads

window.onload = function(){
  <script language="JavaScript" src="index.js"></script>
};

if you dont want it like this you can add the

<script src="index.js"></script>

after the body loads

everything seems to be working fine when i had the html and js files setup in my local and checked it can you please elaborate your issue if there is something else you are referring to.

Type error in javascript code for making a filter

2 Answers2