title: Toggle element's class by ID
body: <p>I’m trying to change the class of an element when it is clicked on from one value A to value B and then from value B back to value A when it is clicked a second time. I found some code on here that allowed me to change it once, but not a second time. (See original <a href="https://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript" title="here">here</a>). </p>
  
  <p>Here is the original code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function changeClass() {
      document.getElementById("MyElement").className += " MyClass";
      document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '')
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function changeClass() {
      if (document.getElementByID("arrow").className == "arrowdown") {
        document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup')
      }
      elseif(document.getElementByID("arrow").className == "arrowup") {
        document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown')
      }
    }
  &lt;/script&gt;
  </code></pre>