Use vanilla javascript to add / remove class to a different element after clicking on another one

Question

I have looked through a number of similar questions but can not find a specific example of one that answers in vanilla JS how to add and remove a class to a different elemen

Answer 1

You need to loop:

[...document.querySelectorAll('.faq-container')]
  .forEach(faq => faq.addEventListener('click', () => 
  document.querySelector('body').classList.toggle('faq-display')))

---

NOTE: if you have MANY of these divs, you are better off having one event handler for a parent and test what was clicked.

document.getElementById('faqContainerParent')
  .addEventListener('click', e => {
  const tgt = e.target;
  if (tgt.classList.contains("faq-container") || tgt.closest("div.faq-container")) { // is it the faq-container or one of the decendants
    document.querySelector('body').classList.toggle('faq-display')
  }
});