toggle style on current class elem when clicked in ES6

Question

  var expandIt=document.getElementsByClassName('k-grid');  

  function expandClickcurrentNOTs () { 
      console.log('pressed'); // works
      console.log(e.target); // but need to add class to only class elem clicked
    }

  for (i = 0; i < expandIt.length; i++) {
    expandIt[i].addEventListener("click", expandClickcurrentNOTs);
  }

Above is what I have; I simply want to add a style when one of my class elements is clicked.. But only to that specific one, not all other class elements.

Answer 1

Get the elements using Document.querySelectorAll() , which returns a static NodeList the you can iterate with NodeList.forEach() . Add an event handler to each element, and in the handler use toggle to add/remove the class name from the element's classList .

 const expandIt = document.querySelectorAll('.k-grid') .forEach(el => el.addEventListener('click', () => { el.classList.toggle('pressed') }))

 .k-grid.pressed { color: red; }

 <div class="k-grid">k-grid</div> <div class="k-grid">k-grid</div> <div class="k-grid">k-grid</div> <div class="k-grid">k-grid</div> <div class="k-grid">k-grid</div> <div class="k-grid">k-grid</div>