Data filter on one of my pages

[Sam]

I realized that my YouTube videos page was getting a bit too crowded so I wanted to add the option to filter the content into more specific categories but it's not really working and idk why, the buttons should turn red when you click them, the "show everything" button should be active when you load the page, the movies button just straight up does nothing and I'm so confused

The YouTube page in question

Spoiler

The CSS:

Code

.filterDiv {
display: none;
}

.show {
  display: block;
}


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

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

.btn.active {
  background-color: #E71B10;
  color: white;
}

The Javascript:

Code

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

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("tags");
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";
  });
}

The HTML:

Code

<div class="filterDiv all animations videogames">
<div class="subheader">GATES OF HALLOWNEST [Hollow Knight Animation]</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=1:28</p>

<p>A beautiful Hollow Knight animation that very well summarizes how it feels like to play the game, the art style is really pretty & I love the way they utilize the music & sound effects</p>
</div>




<div class="filterDiv animations videogames">
<div class="subheader">Nobody - White Lady | Hollow Knight Animatic</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=3:30</p>

<p>The white lady is a character we don't know much about so seeing an interpretation of her where she is lonely and truly sees the vessels as her children who she loves and misses is heartbreaking, the same artist has a few other Hollow Knight animatics so if you liked this one you should 100% check those out, their White Ball video is beautiful</p>
</div>




<div class="filterDiv animations">
<div class="subheader">Only a lad // Oingo Boingo animation</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=4:04</p>

<p>Probably my favorite unofficial music video, it's an insanely detailed animation to one of my favorites Oingo Boingo songs, pretty much every single frame has some sort of easter egg, the colors can be a little eyestraining but it's part of what makes the art style so beautiful</p>
</div>




<div class="filterDiv informative">
<div class="subheader">OK, but What Are The Other 403 Errors?</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=5:05</p>

<p>Short and sweet explanation of how HTTP errors work and what they mean, I love it when people explain complicated or more technical stuff like this in a way that's clear and simple to comprehend</p>
</div>




<div class="filterDiv videogames">
<div class="subheader">Undertale is a horribly made game</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=10:31</p>

<p>Undertale is a materpiece but the fact that it's playable is miracle, the code is an absolute mess and it's full of spaghetti code and it's really entertaining and funny to look at and see how much of a disaster this incredible game is on the inside but I also think that's really inspiring how as long as you do something with love and dedication it doesn't matter if you aren't an expert, you can still create something amazing</p>
</div>




<div class="filterDiv videogames">
<div class="subheader">A Review and Appraisal of Every Burgerpants and Pizzapants Sprite</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=16:17</p>

<p>Really funny and surprisingly well structurated, detailed and beautifully edited, giving somewhat logical explanations behind each rating + I will always be here to support someone with a weird as hell favorite character, this channel has really made me start appreciating Burgerpants as a character more than I ever believed I could (and he was already one of my favorite minor characters)</p>
</div>




<div class="filterDiv videogames theories">
<div class="subheader">Explaining Why Mato Hates Oro | Hollow Knight Lore</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=19:57</p>

<p>It was so hard to only choose one video from this channel (I want to keep this page with as much variety as posible) but I went for this one because I love the nailmasters, this channel has a bunch of really solid theories with great and enganging editing</p>




<div class="filterDiv movies">
<div class="subheader">Lego Batman's Subversive Queercoding</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=21:48</p>

<p>An amazing summary of Batman's history with homosexuality through the years and the way this led to him becoming an icon of peak heterosexuality and masculinity with the Joker being his very obviously queer rival which all makes their relationship in this movie so genius and unexpected (+genuinely adorable), one of the many reasons Lego Batman is unironically my favorite superhero movie of all time</p>
</div>




<div class="filterDiv videogames">
<div class="subheader">Redesigning THE TEACHER from Little Nightmares 2</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=35:31</p>

<p>I love Little Nightmares 2 as much as the next guy so while I disagree with some of the criticism of the game presented I still find this to be an INCREDIBLE reimagining, every aspect of the character down to the most minor details is greatly designed and well thought out with a clever reason for being included, this video is part 1 of a rewrite of the entire game that so far is amazing and really interesting which takes a completely different approach to the pale city</p>
</div>




<div class="filterDiv videogames">
<div class="subheader">Why Is Berdly In Deltarune? An (Over)Analysis</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=37:02</p>

<p>I hate the way so many people in the fandom mischaracterize Berdly, he's an awesome character that I'm convinced will be really important for the plot later so please I'm begging everyone, both fans and haters of Berdly to watch this video, it perfectly demonstrates why he's such a great and dare I say tragic character and I swear it could make you change your mind about him</p>
</div>




<div class="filterDiv videogames theories">
<div class="subheader">Whats up with the Moon? - Secret of the Mimic - Fnaf Theory</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=41:53</p>

<p>A video that analizes the 3 more likely candidates for being the moon in Screts of the Mimic, altought I believe that the second candidate is the most likely one the third one is so poetic that it's my favorite one, also it provides my favorite interpretation of David's death as a theory that makes perfect sense and is way more interesting and symbolic than the one from Tales of the Pizzaplex</p>
</div>




<div class="filterDiv videogames">
<div class="subheader">(Over) Analyzing FFPS Lawsuits</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=43:18</p>

<p>I love seeing people analizing something unimportant, it's really fun to see how much detail goes into the things nobody pays attention to, to be fair none of these lawsuits reveal anything super important about the lore but give some insight into Fazbear Entertainment as a bussiness and are really funny, the comedy of FNaF is a very underappreciated aspect of the franchise but it's one of my favorite parts about it</p>
</div>



<div class="filterDiv videogames theories">
<div class="subheader">The Burgerpants Conspiracy | Predicting DELTARUNE's Future</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=50:36</p>

<p>Aged horribly now that chapters 3 & 4 are out but I still think it's a really interesting turn the game could have took that gives some more minor characters really interesting characterization but what I like the most about this theory is the format used to present it, this channel's theories are all explained using one of those "conspiracy theory cork board with pictures connected by a red string" and that makes it way more entertaining to watch and is a pretty clever way to visualize the information and make it more digestible</p>
</div>




<div class="filterDiv videogames">
<div class="subheader">Game Composer Ranks ALL HOLLOW KNIGHT BOSS THEMES</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=51:04</p>

<p>One of my favorite parts about videogames is the music, a good soundtrack is able to give more personality to the world and characters and explain the story of the encounters and this man perfectly understands that importance and analizes each track on a really technical level, unfortunately due to being a video featuring all the songs you can't go into too much detail about each one but that's not a problem since the same channel has a series of videos analizing individual sonng from games like Undertale and Elden Ring, if you like videogames and music I can not recommend this channel enough</p>
</div>




<div class="filterDiv videogames">
<div class="subheader">Can YOU Beat CUPHEAD WITHOUT GETTING HIT?</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=1:09:19</p>

<p>I have a severe addiction to videos of speedrunners doing the most batshit insanely difficult challenges and the combination of the amazing editing, clear explanation of the way the game's programming works, a narrator with a relaxing voice and the difficulty of the challenge itself makes this video one of my favorites in that department</p>
</div>




<div class="filterDiv movies">
<div class="subheader">Failing At Superman: A Man Of Steel Retrospective</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=1:45:59</p>

<p>As a huge Snyderverse hater this summarizes perfectly all the issues I have with Man of Steel in a way that's enjoyable to watch even if you are lucky enough to have never seen the movie and goes in depth as to why the mere concept of this film is an insult to Superman as a character</p>
</div>




<div class="filterDiv movies">
<div class="subheader">Disney's GREATEST Modern Villain: a Turbo/King Candy Analysis</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=2:14:27</p>

<p>My favorite video essay EVER, here Randomalistic goes into a maginificient analysis of the absolute wonder of a villain that is Turbo that's so in depth IT'S LONGER THAN THE ACTUAL MOVIE BY HALF AN HOUR where even the most minor details get ripped apart, I love everything about this video, it's absolutely perfectly explained and despite how long it is you never feel like it's stretching itself and the Cabinet Man animation at the end is the cherry on top, if you like Wreck it Ralph even a little bit this is 100% worth every second</p>
</div>



<div class="filterDiv movies theories">
<div class="subheader">The Most Disgusting Kids Character Ever Written</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=2:36:31</p>

<p>Possibly the most unhinged video I have ever seen posted in this platform, the entire recording is narrated like the ramblings of a man who witnessed a lovecraftian abomination mercilessly slaughter a town full of innocents and is currently hiding in his bunker recording audio tapes that he can only hope will end up in the hands of someone strong enough to end the beast's reign of terror once and for all but the most interesting part for the better or the worse is that everything said here is true and there's way more to it, absolutely insane rabbit hole</p>
</div>



<div class="filterDiv movies">
<div class="subheader">
How Toy Story 4 Destroyed Everything - The Complete Saga</div>

<p><iframe width="395" height="220"
src="

</iframe></p>

<p>length=6:06:50</p>

<p>Few things in life are more entertaining than watching someone ramble about a thing they have a ton of passionate love for, and sometimes the same can be said for hatred, the amount of rage contained in those 6 hours is phenomenal and not a single minute of it bored me</p>
</div>

[close]

[Dan Q]

I suspect part of your problem is you have a <div class="filterDiv"> that you've opened... but not closed. So the <div>s below it are contained "within" it.

But if it were me... I wouldn't be using JavaScript for this at all! There's a CSS-only solution that'll work for more people and with higher performance! I've put together a Codepen demonstrating how I'd do it, if you're interested. But the short of it is:

1. Instead of buttons, use radiobuttons (in labels) to switch.

2. Use the container:has(radiobutton:checked) CSS filter trick to say "show no videos; show all videos if 'everything' checked; otherwise show only videos that have the appropriate tag)

3. Use a little extra CSS to hide the radiobuttons and make their labels "look like" buttons.

Take a look at my Codepen and, if you like it, steal it!

[Dan Q]

If you are going to use JavaScript, by the way: your w3AddClass and w3RemoveClass functions are a bit overengineered. There's a much faster way to do both of them (I only mention in case you're using them in other places). Here's some drop-in replacements that do the exact same thing:

Code

function w3AddClass(element, name) {
  element.classList.add(name);
}
 
function w3RemoveClass(element, name) {
  element.classList.remove(name);
}