title: Changing the class of a div when clicking on it?
body: <p>How can I change a div class name when clicking on it? Eg:</p>
  
  <pre><code>&lt;div class="first_name" onclick="changeClass();" id="first_name"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want to change it as follows, when a user clicks on the div</p>
  
  <pre><code>&lt;div class="second_name" onclick="changeClass();"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I wrote the JavaScript as:</p>
  
  <pre><code>&lt;script language="javascript"&gt; 
    function change_autorefreshdiv(){
      var NAME = document.getElementById("first_name")
      NAME.className="second_name"
    } 
  &lt;/script&gt;
  </code></pre>
  
  <p>It's working for the first instance only. That is on page load, if I click on it, the <code>first_name</code> gets changed into <code>second_name</code>. But clicking on it again, it won't revert the <code>second_name</code> to <code>first_name</code>. </p>