How can I streamline my code? I'm fairly new to Javascript and am writing a piece of code to create a filtering system for a portfolio grid (a grid of work examples that filter by category when a button is selected).

While the code works just fine, I feel like the way I'm writing it is overly clunky. Can someone please let me know if there's a way I can streamline/improve this code block?

Any help would be much appreciated - thanks! :D

var gridItem = document.querySelectorAll('.grid div');
var featuredItem = document.querySelector('.featured');
var filterBtn = document.querySelectorAll('.filter-btn');


function getAttributes(event) {
  event.preventDefault();

  var thisValue = event.target.getAttribute('data-filter');

  // Get grid item filter attributes
  for (let a = 0; a &lt; gridItem.length; a++) {
    const gridFilterAttr = gridItem[a].getAttribute('data-filterType');
    if (thisValue == gridFilterAttr) {
      gridItem[a].classList.add('active')
      gridItem[a].classList.remove('not-active')
    } else if (thisValue == 'all') {
      gridItem[a].className = 'active';
      featuredItem.className = 'featured active'


    } else {
      gridItem[a].classList.remove('active')
      gridItem[a].classList.add('not-active')
    }
  }
}

for (let b = 0; b &lt; filterBtn.length; b++) {
  filterBtn[b].addEventListener('click', getAttributes);

}


HTML:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Js Projects&lt;/title&gt;
  &lt;link rel="stylesheet" href="/assets/css/app.css"&gt;
&lt;/head&gt;




  &lt;div class="container"&gt;
    &lt;button data-filter="all" class="filter-btn"&gt;All&lt;/button&gt;
    &lt;button data-filter="web" class="filter-btn"&gt;Web Project&lt;/button&gt;
    &lt;button data-filter="app" class="filter-btn"&gt;App&lt;/button&gt;
    &lt;button data-filter="ux" class="filter-btn"&gt;UX/UI&lt;/button&gt;

    &lt;div class="grid"&gt;
      &lt;div class="featured" data-filterType="web"&gt;Featured Item&lt;/div&gt;
      &lt;div data-filterType="web"&gt;Web item&lt;/div&gt;
      &lt;div data-filterType="app"&gt;App item&lt;/div&gt;
      &lt;div data-filterType="ux"&gt;UX item&lt;/div&gt;
      &lt;div data-filterType="web"&gt;Web item&lt;/div&gt;
      &lt;div data-filterType="ux"&gt;UX item&lt;/div&gt;
      &lt;div data-filterType="app"&gt;App item&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Scripts --&gt;
  &lt;script src="/assets/js/grid.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
As mentioned in comment, it is harder to be more specific without being able to run the code, but what can I say:


Separate event code function and then the function, that will "do the work" itself, with all necessary parameters.
Extract for into separate function.


That will overall make it easier to read and cleaner + easier to test. Something like:

function getAttributes(event) {
  event.preventDefault();
  var thisValue = event.target.getAttribute('data-filter');
  setGridItems(gridItem, thisValue);
}

function setGridItems(gridItems, dataFilter) {
  for (let a = 0; a &lt; gridItems.length; a++) {
    setGridItem(gridItems[a], dataFilter);
  }
}

function setGridItem(singleGridItem, dataFilter) {
    const gridFilterAttr = singleGridItem.getAttribute('data-filterType');
    if (dataFilter == gridFilterAttr) {
      singleGridItem.classList.add('active')
      singleGridItem.classList.remove('not-active')
    } else if (dataFilter == 'all') {
      singleGridItem.className = 'active';
      featuredItem.className = 'featured active'
    } else {
      singleGridItem.classList.remove('active')
      singleGridItem.classList.add('not-active')
    }

}



Would be cool to use foreach there, but it is a bit problematic with NodeList and support is not that broad yet, but maybe you could do that. Now when you have it a bit separated, you can continue with refactoring. I don't like that some variables are pre-cached and "global", that's why I passed gridItem variable anyway to make it local in function, but featuredItem is still global.
Last function could use more of refactoring, but I'd need more info about problem for that :-)