title: change input button style using javascript on click
body: <p>I wanted to change the style of the button I'm using every time I clicked that button and together change it's text. Problem is I wanted to do it using and external javascript which I'm not that familiar with it's syntax. To elaborate what I wanted to do is to have a button having a text displaying like: Very Good, Good, Moderate, Failed. Each of the text has it's own assigned gradient color using CSS let's say a gradient of Green for Very Good, Yellow for Good, Orange for Moderate and Red for failed. Tried searching for it but I only landed on an irrelevant posts. What I think is that I need to make a button with on click and everytime I click the javascript will add int values from 0 and reset back to 0 after it reaches 3. then I think I can use case for the css class assigning like <code>this.style="failed"</code> Well I don't know if this is possible.</p>
  
  <p>UPDATE:
  After doing some research I've managed to do something about the changing texts (using javascript alone) but not yet the class part since I think the class is a keyword in javascript. here's my script so far:</p>
  
  <pre><code>    function buttonChange(){
      var button = document.getElementById("stats");
      switch (button.value)
      {
        case "Very Good":
        button.value="Good";
        break;
        case "Good":
        button.value="Moderate";
        break;
        case "Moderate":
        button.value="Failed";
        break;
        default:
        button.value="Very Good";
      }       
  }
  </code></pre>
  
  <p>now the problem is the style. :)</p>