title: How to change button background color 3 times with HTML5 & CSS
body: <p>I am creating a table of buttons that a internal user can click on individually. I need the buttons to be able to toggle the background from White to Green to Red then back to White ....  The user is internal and I can specify that this only works on Chrome. I would like to stick with basic HTML5/CSS3 and Javascript as it is more procedural and my team (we are NOT web page developers) are more likely to be able to maintain it.</p>
  
  <p>Button Elements do not seem to work the same as Text or other elements. I have taken code to change other background colors but it does not work when the element is a button.</p>
  
  <p>My 2 basic blocking issues are:</p>
  
  <ol>
  <li><p>How do you read the current background color in the onClick()
  routine so my code can calculate the next color?</p>
  
  <p>How do you change the style or class of a Button element so that the
  background color changes during or when you exit the onClick() routine?</p></li>
  </ol>
  
  <p>I have seen examples that define 3 different color styles in the CSS file like this:</p>
  
  <pre><code>.make-background-white { background-color: white}
  .make-background-green { background-color: green}
  .make-background-red   { background-color: red}
  </code></pre>
  
  <p>And I can use these when I initially draw the buttons. But I do not know how to 'read' the current background color in the onClick() routine nor can I change the color.</p>
  
  <p><strong>MORE DETAILS</strong></p>
  
  <p>I read from a database to find all the zip-codes around a store sorted by distance. I create a table of buttons with zip-codes as the text and this can range from 40-600 buttons.  The background color shows what zip-codes are not-assigned (white background) and what zip codes are assigned (green background).</p>
  
  <p>Sometimes the user wants to click a few White zip codes to signal that they want to assign that code to the store.</p>
  
  <p>I also want some helper buttons on the side that the user can click to automatically color/assign zip codes to the store with a 30 or 60 or 90 mile radius.</p>
  
  <p>I have a large Javascript Hash/associative array behind the scenes that use the zip-code as the key and this is used to create the buttons, track the distance, track which zip codes are assigned or un-assigned, etc.  This is straightforward.  Its the dynamically changing the button background that is throwing me off.</p>
  
  <p>I did manage after three days of hacking to make something work by using Jquery with call-backs like this:</p>
  
  <pre><code>$(".btn").click(function() {
      if ( $(this).hasClass ('make-background-white') {
          $(this).removeClass('make-background-white');
          $(this).addClass ('make-background-green');
      } else if ( $(this).hasClass('make-background-green') {
           // Remove green, add red
      } else if () {
          // Remove red, add white
      }
  
  }
  </code></pre>
  
  <p>This seems to trigger the button to re-draw with the new background and works by storing a string in the "class" attribute that I can later read and manipulate. It's a call back in the middle of the rest of my more straight-forward Javascript and the other onClick() routines that use "getElementById()" cannot seem to  read or manipulate the "class" attribute in the same fashion.  </p>
  
  <p>Any help doing the above in Javascript would be appreciated.</p>