Question 176974 in Html Question posted in
Some basic documentation can be found here.

Html – Why are my JS element filters not working?

I want to create a filter where clicking on each box will remove any elements which don’t match that description. I have tried adding some code found on W3 but this isn’t working for me:
https://www.w3schools.com/howto/howto_js_filter_elements.asp

When I click on the boxes nothing is filtered off the page.

Image of project

// Filters
filterSelection("all");

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  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("myBtnContainer");
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";
  });
}
/*FILTERS*/

.filter-container {
  overflow: hidden;
}

.filterDiv {
  float: left;
  background-color: #2196f3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
  /* Hidden by default */
}


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

.show {
  display: block;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}


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

.btn:hover {
  background-color: #ddd;
}


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

.btn.active {
  background-color: #666;
  color: white;
}
<!--FILTER BUTTONS-->
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')">
            Show all
          </button>
  <button class="btn" onclick="filterSelection('red')">Red</button>
  <button class="btn" onclick="filterSelection('yellow')">Yellow</button>
  <button class="btn" onclick="filterSelection('blue')">Blue</button>
  <button class="btn" onclick="filterSelection('green')">Green</button>
</div>

<!--THE TABLE-->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="modalText"></p>
  </div>
</div>
<div id="container"></div>

<div class="periodic-table" class="filter-container">
  <div class="empty-space-1"></div>
  <div class="empty-space-2"></div>

  <button class="open-modal" class="filterDiv yellow" data-id="h1">
              <div class="periodic-element one">
                <div class="periodic-table-inner">
                  <div class="title">h1</div>
                  <div class="desc">Large Heading</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv yellow" data-id="style">
              <div class="periodic-element one">
                <div class="periodic-table-inner">
                  <div class="title">Style</div>
                  <div class="desc">Styling</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv blue" data-id="anchor">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">A</div>
                  <div class="desc">Anchor</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv green" data-id="comment">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">!-></div>
                  <div class="desc">Comment</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv green" data-id="svg">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Svg</div>
                  <div class="desc">Svg Image</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv red" data-id="ul">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">Ul</div>
                  <div class="desc">Unordered List</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv red" data-id="br">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">Br</div>
                  <div class="desc">Line Break</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv yellow" data-id="li">
              <div class="periodic-element one">
                <div class="periodic-table-inner">
                  <div class="title">Li</div>
                  <div class="desc">List</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv yellow" data-id="ol">
              <div class="periodic-element one">
                <div class="periodic-table-inner">
                  <div class="title">Ol</div>
                  <div class="desc">Ordered List</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv green" data-id="img">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Img</div>
                  <div class="desc">Image</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv green" data-id="nav">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Nav</div>
                  <div class="desc">Navigation</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv blue" data-id="em">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Em</div>
                  <div class="desc">Emphasized</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv blue" data-id="div">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Div</div>
                  <div class="desc">Groups Elements</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv blue" data-id="link">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Link</div>
                  <div class="desc">External Link</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv red" data-id="i">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">I</div>
                  <div class="desc">Italic</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv red" data-id="u">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">U</div>
                  <div class="desc">Underlined</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv red" data-id="b">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">B</div>
                  <div class="desc">Bold text</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv blue" data-id="col">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Col</div>
                  <div class="desc">Column Properties</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv blue" data-id="data">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Data</div>
                  <div class="desc">M-R Data</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv green" data-id="body">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Body</div>
                  <div class="desc">Main Content</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv green" data-id="dfn">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Dfn</div>
                  <div class="desc">Defined term</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv blue" data-id="title">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Title</div>
                  <div class="desc">Tab Title</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv blue" data-id="meta">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Meta</div>
                  <div class="desc">Metadata</div>
                </div>
              </div>
            </button>

  <button class="open-modal" class="filterDiv yellow data-id=" abbr ">
              <div class="periodic-element one ">
                <div class="periodic-table-inner ">
                  <div class="title ">Abbr</div>
                  <div class="desc ">Abbreviation</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal " class="filterDiv red " data-id="form ">
              <div class="periodic-element four ">
                <div class="periodic-table-inner ">
                  <div class="title ">Form</div>
                  <div class="desc ">Form for User</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal " class="filterDiv red " data-id="h6 ">
              <div class="periodic-element four ">
                <div class="periodic-table-inner ">
                  <div class="title ">h6</div>
                  <div class="desc ">Small Heading</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal " class="filterDiv green " data-id="main ">
              <div class="periodic-element three ">
                <div class="periodic-table-inner ">
                  <div class="title ">Main</div>
                  <div class="desc ">Main Content</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal " class="filterDiv yellow " data-id="html ">
              <div class="periodic-element one ">
                <div class="periodic-table-inner ">
                  <div class="title ">Html</div>
                  <div class="desc ">Root HTML</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal " class="filterDiv green " data-id="p ">
              <div class="periodic-element three ">
                <div class="periodic-table-inner ">
                  <div class="title ">P</div>
                  <div class="desc ">Paragraph</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal " class="filterDiv green " data-id="href ">
              <div class="periodic-element three ">
                <div class="periodic-table-inner ">
                  <div class="title ">Href</div>
                  <div class="desc ">URL</div>
                </div>
              </div>
            </button>
        </div>
Tags:

3

Answers


  1. 0

    Your HTML is not right:

    • There is an unclosed attribute here:

      <button class="open-modal" class="filterDiv yellow data-id=" abbr ">

      Add the missing double quote after "yellow".

    • You have double class attributes… The earlier one will take precedence. So join all those double attributes into one:

      <button class="open-modal filterDiv yellow" data-id=" abbr ">
    Login or Signup to reply.
  2. 0

    Following @Trincot’s advice: it now works!

    // Filters
filterSelection("all");

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  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("myBtnContainer");
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";
  });
}
    /*FILTERS*/

.filter-container {
  overflow: hidden;
}

.filterDiv {
  float: left;
  /* background-color: #2196f3; 
  color: #ffffff;*/
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
  /* Hidden by default */
}


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

.show {
  display: block;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

button.yellow {background-color:yellow}
button.green {background-color:green}
button.red {background-color:red}
button.blue {background-color:blue} 


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

.btn:hover {
  background-color: #ddd;
}


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

.btn.active {
  background-color: #666;
  color: white;
}
    <!--FILTER BUTTONS-->
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')">
            Show all
          </button>
  <button class="btn" onclick="filterSelection('red')">Red</button>
  <button class="btn" onclick="filterSelection('yellow')">Yellow</button>
  <button class="btn" onclick="filterSelection('blue')">Blue</button>
  <button class="btn" onclick="filterSelection('green')">Green</button>
</div>

<!--THE TABLE-->
<div id="myModal"  class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="modalText"></p>
  </div>
</div>
<div id="container"></div>

<div class="periodic-tablefilter-container">
  <div class="empty-space-1"></div>
  <div class="empty-space-2"></div>

  <button class="open-modal filterDiv yellow" data-id="h1">
              <div class="periodic-element one">
                <div class="periodic-table-inner">
                  <div class="title">h1</div>
                  <div class="desc">Large Heading</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv yellow" data-id="style">
              <div class="periodic-element one">
                <div class="periodic-table-inner">
                  <div class="title">Style</div>
                  <div class="desc">Styling</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv blue" data-id="anchor">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">A</div>
                  <div class="desc">Anchor</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv green" data-id="comment">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">!-></div>
                  <div class="desc">Comment</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv green" data-id="svg">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Svg</div>
                  <div class="desc">Svg Image</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv red" data-id="ul">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">Ul</div>
                  <div class="desc">Unordered List</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv red" data-id="br">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">Br</div>
                  <div class="desc">Line Break</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv yellow" data-id="li">
              <div class="periodic-element one">
                <div class="periodic-table-inner">
                  <div class="title">Li</div>
                  <div class="desc">List</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv yellow" data-id="ol">
              <div class="periodic-element one">
                <div class="periodic-table-inner">
                  <div class="title">Ol</div>
                  <div class="desc">Ordered List</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv green" data-id="img">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Img</div>
                  <div class="desc">Image</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv green" data-id="nav">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Nav</div>
                  <div class="desc">Navigation</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv blue" data-id="em">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Em</div>
                  <div class="desc">Emphasized</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv blue" data-id="div">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Div</div>
                  <div class="desc">Groups Elements</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv blue" data-id="link">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Link</div>
                  <div class="desc">External Link</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv red" data-id="i">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">I</div>
                  <div class="desc">Italic</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv red" data-id="u">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">U</div>
                  <div class="desc">Underlined</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv red" data-id="b">
              <div class="periodic-element four">
                <div class="periodic-table-inner">
                  <div class="title">B</div>
                  <div class="desc">Bold text</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv blue" data-id="col">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Col</div>
                  <div class="desc">Column Properties</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv blue" data-id="data">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Data</div>
                  <div class="desc">M-R Data</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv green" data-id="body">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Body</div>
                  <div class="desc">Main Content</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv green" data-id="dfn">
              <div class="periodic-element three">
                <div class="periodic-table-inner">
                  <div class="title">Dfn</div>
                  <div class="desc">Defined term</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv blue" data-id="title">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Title</div>
                  <div class="desc">Tab Title</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv blue" data-id="meta">
              <div class="periodic-element two">
                <div class="periodic-table-inner">
                  <div class="title">Meta</div>
                  <div class="desc">Metadata</div>
                </div>
              </div>
            </button>

  <button class="open-modal filterDiv yellow data-id=" abbr ">
              <div class="periodic-element one ">
                <div class="periodic-table-inner ">
                  <div class="title ">Abbr</div>
                  <div class="desc ">Abbreviation</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal filterDiv red " data-id="form ">
              <div class="periodic-element four ">
                <div class="periodic-table-inner ">
                  <div class="title ">Form</div>
                  <div class="desc ">Form for User</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal filterDiv red " data-id="h6 ">
              <div class="periodic-element four ">
                <div class="periodic-table-inner ">
                  <div class="title ">h6</div>
                  <div class="desc ">Small Heading</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal filterDiv green " data-id="main ">
              <div class="periodic-element three ">
                <div class="periodic-table-inner ">
                  <div class="title ">Main</div>
                  <div class="desc ">Main Content</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal filterDiv yellow " data-id="html ">
              <div class="periodic-element one ">
                <div class="periodic-table-inner ">
                  <div class="title ">Html</div>
                  <div class="desc ">Root HTML</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal filterDiv green " data-id="p ">
              <div class="periodic-element three ">
                <div class="periodic-table-inner ">
                  <div class="title ">P</div>
                  <div class="desc ">Paragraph</div>
                </div>
              </div>
            </button>
    
            <button class="open-modal filterDiv green " data-id="href ">
              <div class="periodic-element three ">
                <div class="periodic-table-inner ">
                  <div class="title ">Href</div>
                  <div class="desc ">URL</div>
                </div>
              </div>
            </button>
        </div>
    Login or Signup to reply.
  3. 0

    @trincot’s fix works, and should be the accepted answer.

    but I’d like to suggest some improvements to the javascript code:

    // Filters
filterSelection("all");

// Adds the "show" class to selected elements, and removes it from unselected
function filterSelection(c) {
  let elements = document.querySelectorAll('.filterDiv'); 
  elements.forEach((el) => {
    if( c == 'all' || el.classList.contains(c) )
      el.classList.add('show')
    else
      el.classList.remove('show');
  });
}

// w3AddClass and w3RemoveClass is not needed

// Add active class to the current control button (highlight it)
let btns = document.querySelectorAll("#myBtnContainer btn");
btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    var current = document.querySelector("active");
    current.classList.remove('active');
    this.classList.add('active');
  });
});

    W3Schools is doing alot of unnecessary stuff here, to show of some syntax and features of the language. In this case reinventing the wheels for basic built-in functions like adding and removing classes.

    It’s a great resource for learning, but often not a good place to copy code for use in production.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search