title: Create a button that changes between red and green
body: <p>I want to create a simple button that changes between the colors red and green as I click them to indicate that something has been completed. Does anyone know of a simple way to get a button to change back and forth between colors? The setup of the page isn't how I want it yet but the button needs to be configured before I can format the rest of the page how I would like. I left out the CSS that deals with the body and other things like the headings.
  Here is what I have so far after looking online for a while:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function colorChange(id) {
    var e1 = document.getElementById(id);
    var currentClass = el.getAttribute("class");
    if(currentClass == 'classA') {
      el.setAttribute("class", "classB");
    }
    else {
      el.setAttribute("class", "classA");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#select {
      width: 10em;
      height: 1.5em;
  }
  
  .classA {
      background: red;
  }
  
  .classB {
      background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" id="select" onclick="colorchange('select')" class="classA" /&gt;</code></pre>
  </div>
  </div>
  </p>