Javascript: Multiple GetElementByID's in one call

Question

Really simple question. I have the following code, and would like to consolidate it down as much as possible. Can't get it to work though.. tried using commas etc. Is there a way to call more than one ID in the GetElementByID method? New to Javascript : /

$("#set50").live("click", function() {
    document.getElementById("statusBox50").setAttribute("class", "statusBoxSelected");
    document.getElementById("statusBox25").setAttribute("class", "statusBox");
    document.getElementById("statusBox75").setAttribute("class", "statusBox");
    document.getElementById("statusBox100").setAttribute("class", "statusBox");
    $(".statusbar").animate({
        width: '115px'
    }, 500);    
});

Answer 1

No, but since you're using jQuery anyway, you can use that. This will add the statusBox class to the elements with the IDs statusBox25 , statusBox75 , and statusBox100 :

$("#statusBox25, #statusBox75, #statusBox100").addClass('statusBox');

Alternatively, if you want to remove all of the existing classes and replace them all with statusBox like your original code as doing, you could use this:

$("#statusBox25, #statusBox75, #statusBox100").attr('class', 'statusBox');

Answer 2

Is there a way to call more than one ID in the GetElementByID method?

No, and it is Id (with a lower case d)

And don't use setAttribute , it is broken in all but the most recent versions of IE.

You're using jQuery, so you can use its helper functions:

jQuery('#statusBox50').addClass('statusBoxSelected');
jQuery('#statusBox25, #statusBox75, #statusBox100').addClass('statusBox');

Answer 3

You should be able to do something like:

$("#set50").live("click", function() {
    $("#statusBox50").addClass("selected");
    $("#statusBox25, #statusBox75, #statusBox100").removeClass("selected");
    $(".statusbar").animate({...});
});

Note that I am doing something different to you: I have a class "selected" that I either apply or remove, rather than setting the classes of [statusBoxSelected|statusBox]. This could be in addition to a class="statusBox".

I'd also recommend you look at other ways that don't hard-code the ids like that. For instance:

$(".set50").live("click", function(evt) {
    $('.statusBar').removeClass("selected");
    $('#statusBar50').addClass("selected");
});

You could even go further, and have an attribute on the "set" elements that contained the amount the status bar should be set to.

Or consider using an HTML5 progress bar, and some shims to do the same in non-supported browsers.

Answer 4

$("#set50").live("click", function() {
    $("statusBox50").addClass("statusBoxSelected");
    $("statusBox25").addClass"statusBox");
    $("statusBox75").addClass( "statusBox");
    $("statusBox100").addClass( "statusBox");
    $(".statusbar").animate({
        width: '115px'
    }, 500);    
});

is this what u want ?

.addClass adds a class to the selected element.[ docs ]

EDIT : As u said u want a single. Just assign a class to all the elements u want to add the class. For eg: i assign the class adding . then u can addclass to all the elements like this :

$('.adding').addClass('statusBox')