Question

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 this.style="failed" Well I don’t know if this is possible.

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:

    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";
    }       
}

now the problem is the style. 🙂

Answer 1

Using jQuery your code could look something like this:

var values = new Array('Very Good', 'Good', 'Moderate', 'Failed');
var colors = new Array('lime', 'yellow', 'orange', 'red');

$('#rate').click(function() {

    // current index is stored in data attribute
    var idx = $(this).data('value') + 1;

    // last value was selected -> go back to first one
    if (idx >= values.length) {
        idx = 0;
    }

    // update data attribute with current index
    $(this).data('value', idx);

    // update button text
    $(this).val(values[idx]);

    // update button background color
    $(this).css('background-color', colors[idx]);

});​

See this FIDDLE.