Question

I am absolutely new to javascript, so please bear with me.

I have 50 elements on my page with ids. All are set to visibility:hidden and position:fixed. I have a button that corresponds to each element. When a button is clicked, a javascript function is initiated which makes the corresponding element visibile and position:relative. Code looks something like this:

document.getElementById("id1").style.position='relative';
document.getElementById("id1").style.visibility='visible';

To ensure that only one element is ever visible and relative, I also need to make the other 49 elements hidden and fixed. How can I accomplish this without having to resort to the following sort of code:

function makeid1visibile()
{
    document.getElementById("id1").style.position='relative';
    document.getElementById("id1").style.visibility='visible';

    document.getElementById("id2").style.position='fixed';
    document.getElementById("id2").style.visibility='hidden';
    document.getElementById("id3").style.position='fixed';
    document.getElementById("id3").style.visibility='hidden';
    document.getElementById("id4").style.position='fixed';
    document.getElementById("id4").style.visibility='hidden';
    // etc...
}

Any help would be appreciated, because with 50 elements, the number of lines of coding would be outrageous.

Answer 1

Should be able to handle it with a single loop, just pass in the number of the item you wish to show:

function makeIdVisible(id) {
    document.getElementById("id" + id).style.position='relative';
    document.getElementById("id" + id).style.visibility='visible';

    for (var i = 1; i <= 50; i++) {
        if (i !== id) {
            document.getElementById("id" + i).style.position='fixed';
            document.getElementById("id" + i).style.visibility='hidden';
        }
    }
}