<div id="agg-filter-buttons">

<button   onclick="filterSelection(event)"><span data- 
 value="freespins">Free Spins <div ></div> </span></button>

    <button   onclick="filterSelection(event)"> <span data-value="bigbonus">Big Bonus <div ></div>  </span></button>  </div>
    enter code here

</div>

    <div >
      Row 1
     </div>
   
       <div >
        Row 2
       </div>


 filterSelection();
  function filterSelection(e) {
    var x, i, c;
    x = document.getElementsByClassName("filterDiv");
    var allBtns = document.getElementsByClassName("filter-btn")
    for(i = 0; i<allBtns.length; i  ){
      let rowsAffected = allBtns[i].querySelector('.num-brands');
      rowsAffected.innerText = '';
    }
      c = "all";
      if(e && e.target.dataset){
        c = e.target.dataset.value ? e.target.dataset.value : "all";
      }
    const numBrands = [];
    for (i = 0; i < x.length; i  ) {
      x[i].classList.remove('show');
      void x[i].offsetWidth;
          if (x[i].classList.contains(c)) {
            x[i].classList.add('show');
            numBrands.push(i);
          }
    }
    if(e && e.target){
      e.srcElement.children[0].innerText =  ` (${numBrands.length})`;
    }
  }
  // Add active class to the current control button (highlight it)
  var btnContainer = document.getElementById("agg-filter-buttons");
  var btns = btnContainer.getElementsByClassName("filter-btn");

  for (var i = 0; i < btns.length; i  ) {
    btns[i].addEventListener("click", function($this) {
      var current = document.querySelectorAll(".active-btn");
      current[0].className = current[0].className.replace(" active-btn", "");
      this.className  = " active-btn";
    });
  }

  var filter = document.getElementById('agg-filter-buttons');
  filter.addEventListener('click', function(){
    document.getElementsByClassName('section--btable')[0].classList.add('flash');
  });

So I have a table with rows. These are filtered with the filter buttons. When you click a filter button it shows only the rows with the same name in its class. This works and populates the button with how many rows are affected. However this breaks occasionally and I have no idea why. the Variable rowsAffected works until it becomes null for some unknown reason.

My guess is that the dom eventually doesnt load fast enough for the querySelector to be able to read it. But im not sure.. Any advice very welcome!

I have also added a fiddle

https://jsfiddle.net/8z56sxby/

CodePudding user response：

Since you only care about the first .active-btn (because there is at most one), you can just use querySelector.

Make sure there is a current before you do anything with its classes.

Use element.classList.add and element.classList.remove to add or remove classes.

  for (var i = 0; i < btns.length; i  ) {
    btns[i].addEventListener("click", function() {
      var current = document.querySelector(".active-btn");
      if (current) current.classList.remove("active-btn");
      this.classList.add("active-btn");
    });
  }