title: Use vanilla javascript to add / remove class to a different element after clicking on another one
body: <p>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 element from the one clicked on. I know it has something to do with setting up a loop and iterating through the elements, but I got lost in the exact process. </p>
  
  <p>I have a number of elements with a class name of <code>faq-container</code> and when I click on any of them, I would like the class <code>faq-display</code> added to the body tag. I know I have to set up a loop like <code>for (var i = 0; i &lt; elements.length; i++) { elements[i].classList.remove('hover');
  }</code> but I am unsure as to exactly where to write it in the code to make this work. I have tried a number of ways but all fail. </p>
  
  <p>My current script is as follows, where I simply target the first element in the array, but I want to be able to click on any of the <code>faq-container</code> elements and add the class name to the first and only body tag:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded", function() {
  
    document.getElementsByClassName('faq-container')[0].addEventListener('click', function() {
      var faqToggle = document.getElementsByTagName('body')[0];
      if (faqToggle.classList.contains('faq-display')) {
        faqToggle.classList.remove('faq-display');
        // alert("remove faq display!");
      } else {
        faqToggle.classList.add('faq-display');
        // alert("add faq display!");
      }
    });
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="faq-container cf" id="faq-container"&gt;
    &lt;h3 &lt;?=ifxless::element( 'name')?&gt;&gt;&lt;?=ifxless::fill($this,'name');?&gt; &lt;/h3&gt;
  
    &lt;div class="faq-content"&gt;
      &lt;div class="h_line"&gt;&amp;nbsp;&lt;/div&gt;
  
      &lt;div class="faq-bullets" &lt;?=ifxless::element( 'content')?&gt;&gt;
        &lt;?=ifxless::fill($this, 'content');?&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>