title: Extremely weird behaviour with javascript addClass and removeClass
body: <p>I was playing with <a href="http://daneden.github.io/animate.css/" rel="nofollow">animate.css</a> and built my own Javascript function to trigger animation events.</p>
  
  <p>This very simple function (triggered through an onClick event on a button) is only three (four) lines long, but it runs into a truly mind-boggling error.</p>
  
  <p>The <code>anim</code> function first removes the class from the element, then adds it, so that multiple presses on the button will keep running the animation. Unfortunately, I found that it <strong>didn't work!</strong> That is, the animation runs once (the first time only), and then fails to run subsequently.</p>
  
  <p>In a stroke of serendipity, I discovered that adding the line <code>console.log(element_name)</code> in line <code>3</code> suddenly made it work. </p>
  
  <p>I was very puzzled with this behaviour, and so I experimented with adding other <code>console.log</code> lines but strangely only the line <code>console.log(element_name)</code> works!</p>
  
  <p>To ensure that it wasn't a quirk in the development environment, I reproduced it in JSFiddle <a href="https://jsfiddle.net/bhqr99e9/2/" rel="nofollow">here</a>.</p>
  
  <pre><code>function anim(element_name){ //'animate' is a reserved keyword
      removeClass(element_name, 'bounceInDown');
      console.log(element_name); //Very cute behaviour!!! when I put this line here, it works, if i don't it doesnt.
      //console.log('a'); //Not all console.logs work
      addClass(element_name, 'bounceInDown');
  }
  
  function addClass(element, classname){
      element.classList.add(classname);
  }
  
  function removeClass(element, classname){
      element.classList.remove(classname);
  }
  </code></pre>