Javascript half works locally, fully works on code pen

Question

Been racking my brains trying to figure this out. I've tried adding $( document ).ready(function() { and closing it again around the script but not joy.

It's a simple filter. Supposed to show / hide div elements depending on the button. The script adds 'active' to the button clicked and removes it from the other buttons.

It works exactly as intended on Code Pen. However, when running it locally or on a server, the filter works fine, 'active' is added to the button clicked, but 'active' is not removed from the last button and keeps stacking (ie if I click snowdonia 4 times, the class 'active' is applied 4 times. If I then click tryfan, active is applied correctly but not removed from the previous button)

The code I'm using is below. Any help would be much appreciated. The Javascript is EXACTLY as it appears in my filter.js file

 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 header = document.getElementById("myBtnContainer"); var btns = header.getElementsByClassName("btn-filter"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); if (current.length > 0) { current[0].className = current[0].className.replace(" active", ""); } this.className += " active"; }); }

 .filterDiv { display: none; /* Hidden by default */ } /* The "show" class is added to the filtered elements */.show { display: block; }.btn-filter { background-color: #fff; border-radius: 0; padding-right: 5px; padding-left: 5px; padding-top: 4px; padding-bottom: 4px; text-transform: uppercase; font-family: 'Montserrat'; font-size: 14px; font-weight: 600; color: #91227e; border: 2px; border-style: solid; border-color: #91227e; }.active, .btn-filter:hover { background-color: #91227e; color: #fff; }

 <div id="myBtnContainer"> <button class="btn-filter active" onclick="filterSelection('all')"> Show all</button> <button class="btn-filter" onclick="filterSelection('snowdon')"> Snowdon</button> <button class="btn-filter" onclick="filterSelection('tryfan')"> Tryfan</button> <button class="btn-filter" onclick="filterSelection('glyder')"> Glyder</button> </div>

Here are the scripts I have linked in the html file:

And here a link to a working version in codepen: https://codepen.io/dan-anderton-the-sasster/pen/vYgWdER

Answer 1

This is not an answer, but more of a suggestion. But with your localhost environment are you also including the necessary files which are being used in the codepen example? IE: jquery?

I cannot tell from the example you have provided, but a link to the codepen would be useful.

TRY - you may need to tweak slightly to fit your html, as I cannot view this:

var btns = document.getElementsByClassName("btn-filter");
var i;

for (i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
    this.classList.toggle("activated");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Answer 2

Turns out there was a CSS conflict with the active tag between my code and bootstrap. Changing the class to be applied to the current button solved the problem. So changing it from active to active-filter in this case and then styling accordingly.

Thanks everyone for looking at it for me.