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.

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.

• javascript
• user-interface
• coldfusion
• button
• toggle

3 Answers 3

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

})();

The code you already have, covers the general functionality that you need, which is to set the value of a button to a particular string.

The expansion that you're looking at is a matter of changing the value of this string to one of three values. First step might be to look at how you would be able to change a value more than one (not necessarily wrapping). This could be done in a straightforward manner with an array, something like the following:

var labels = [ "Initial", "Value has changed", "Value changed again" ];
var index = 0;

function valChange() {
  index++;
  document.myForm.myButton.value = labels[index];
}

That's great for up to two clicks, but it breaks beyond that because you go past the end of the array. The trick to get the full looping pattern, then, is to reset the counter to zero once it goes past the end, effectively making your array circular:

function valChange() {
  index++;
  if (index == labels.length) {
    index = 0;
  }
  document.myForm.myButton.value = labels[index];
}  

And voila! Every time the valChange function is called, the index is incremented so the next label will be different, and it handles the circularity constraint as required.

Note that this implementation doesn't strictly look at what the label's current value is; rather, it maintains its own version of this state via the index counter. This is arguably simpler and cleaner if you know that this method will be the only way that the label can be modified. However, if the label might arbitrarily be changed to a different value by external code, you might want to work out the index on the fly by getting the button's current label and paring it to each array element in turn. This is slower, a little clumsier, but more robust in the face of external modifications.

You could also do something like this. It all depends on what sort of flexibility/scalability you want.

Here we're storing the values in an object, so we can see: given a current state, where we should transition to.

Obviously not the best solution if you will be adding many more states, but could be useful if the states aren't going to "cycle" in order for some reason.

function valChange() {
    /* Transition states */
    var transitions = {
        /* When value is 'Initial', it will be changed to 'Value has changed' */
        'Initial': 'Value has changed', 
        /* When value is 'Value has changed' it will be changed to 'Value has changed again' */
        'Value has changed': 'Value has changed again',
        /* etc */
        'Value has changed again': 'Initial' 
    };

    var currentValue = document.myForm.myButton.value;

    document.myForm.myButton.value = transitions[currentValue];   
}