Question

I’m trying to create a button that, when clicked will cycle ad nauseum through three distinct values: “Excluded”, “Included” and “Not Sure”, in that order. I’m able to create a simple button that switches values once, using something like this:

function valChange()      {
 document.myForm.myButton.value="Value has changed"
}

However, once I put some if…else logic in there to handle the three values, it still changes on the first click, but not on subsequent clicks. Anyone have any ideas? I’m using javascript and coldfusion, so if there’s a way to do this easy with a CFC, or even jQuery, I’m open to it.

Thanks in advance.

Answer 1

The keyword is tri-state here, Google on that and you find a lot of good resources. For example this website.

---

And I just made this simple example, without using any global variables:

// Wrap variables that shouldn't be globals in a self-executing function
document.getElementById('element').onclick = (function(){

    var i = 0;
    var states= ['first', 'second', 'third'];

    return function(){
        // Increment the counter, but don't let it exceed the maximum index
        i = ++i%states.length; 
        this.value = states[i];
    };

})();