title: using loop to check and remove a className from class name string and add another className to the element which triggers the event
body: <p>it is fairly simple.</p>
  
  <p>I want to make a <code>current</code> class and put it on a link that is currently active </p>
  
  <p>like this : <code>&lt;li class="li current"&gt;&lt;a&gt;Link1&lt;/a&gt;&lt;/li&gt;</code></p>
  
  <p>but before that, the JS should get all of element with <code>class="li"</code>, loop through it and remove the <code>class=" current"</code> if any.</p>
  
  <p>after looping end, then add <code>class=" current"</code> to the element which triggers the event.</p>
  
  <p>for example if user clicks on <strong>link3</strong> then JS should remove the <code>class=" current"</code> on <strong>link1</strong> and then add <code>class=" current"</code> on <strong>link3</strong> </p>
  
  <p>it would look like this : <code>&lt;li class="li current"&gt;&lt;a&gt;link3&lt;/a&gt;&lt;/li&gt;</code></p>
  
  <p>it looks like I cannot use <code>getElementsByClassName()</code> for event listener. what should I do to make an event listener then?</p>
  
  <p>the <strong>HTML</strong></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(){
   var et = document.getElementsByClassName("li");
   for(i=0; i &lt;et.length; i++){
     et[i].addEventListener("click",function(){
      funclink(event);
     });
    };
  });
  
  function funclink(event){
   //first get all element with class "li" and remove class " current"
   //then add class " current" to the element which triggers the event
   var slink = document.getElementsByClassName("li");
   for(i =0; i &lt; slink.length; i++){
    slink[i].className = slink[i].className.replace(" current","");
   }
   event.currentTarget.className += " current";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.current {
  color : orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="navmenu"&gt;
   &lt;li class="li current"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li class="li"&gt;&lt;a href="#"&gt;Call Service&lt;/a&gt;
    &lt;li class="li"&gt;&lt;a class="a-left" href="#"&gt;Rental&lt;/a&gt;&lt;/li&gt;
    &lt;li class="li"&gt;&lt;a class="a-left" href="#"&gt;Sales&lt;/a&gt;&lt;/li&gt;
    
   &lt;/li&gt;
   &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>