JS for loop issue

Question

Hi all, I've got the below code...

var ToggleButtons=new Array();
ToggleButtons[0] = "#Click";
ToggleButtons[1] = "#DoubleClick";
ToggleButtons[2] = "#Drag";
ToggleButtons[3] = "#RightClick";
ToggleButtons[4] = "#MiddleClick"; 


function SelectButton(id) {
    var x = 0;
    for (x = 0; x++; x < ToggleButtons.length) {
        if (x == id) {
            $(ToggleButtons[x]).addClass('ToggleButtonSelected');
        } else {
            $(ToggleButtons[x]).removeClass('ToggleButtonSelected');
        }
    }
} 

however, when I call SelectButton(n) with n=0->4, it hits the for() line and jumps straight to the closing brace.

on the for() line before it executes, Firebug shows (eg)

id=2
ToggleButtons.length=5
x=0

I've got the feeling I'm missing something obvious but I'm not sure what,

Many thanks

Answer 1

Your for() order is mixed up, this:

for (x = 0; x++; x < ToggleButtons.length) {

Should be:

for (x = 0; x < ToggleButtons.length; x++) {

---

You can use .toggleClass("class", bool) to shorten it a bit though, like this:

function SelectButton(id) {
    for (var x = 0; x < ToggleButtons.length; x++) {
        $(ToggleButtons[x]).toggleClass('ToggleButtonSelected', x === id);
    }
} 

An even better approach would be to cache the selectors so they're not run each time, like this:

var ToggleButtons = [$("#Click"), $("#DoubleClick"), $("#Drag"), $("#RightClick"), $("#MiddleClick")]; 

function SelectButton(id) {
    $(".ToggleButtonSelected").removeClass('ToggleButtonSelected');
    ToggleButtons[id].addClass('ToggleButtonSelected');
} 

Answer 2

The parts of the for loop are the wrong way around, it should be initialisation, condition, then incrementation:

 for (x = 0; x < ToggleButtons.length; x++)

Answer 3

Change this line:

for (x = 0; x++; x < ToggleButtons.length) {

to this:

for (x = 0; x < ToggleButtons.length; x++) {