Show and Hide div's javascript works in IE but not FF or Chrome

Question

I have a number of spans(20 - to be exact) they all have Id's. I then in my style sheet I set the visibility to hidden.

I made this script to show and hide these spans once clicking on a section of the image map:

function showDiv(pass) {
    var divs = document.getElementsByTagName('span');    
    for (i = 0; i < divs.length; i++) {
        if (divs[i].id.match(pass)) {
            (pass).style.visibility = 'visible';
            divs[i].style.visibility = 'hidden';
        }          
    }
}

It works perfectly in IE but FF doesn't budge, Chrome displays it alright enough with minor problems that I think I can fix.

Anyone know why FF doesn't accept? Any suggestions would be greatly appreciated and compensated for in the after life :)

Answer 1

style.display = 'none';
style.display = 'inline';

EDIT

Here is my source

http://www.w3schools.com/css/pr_class_display.asp

Answer 2

It is because you are passing in a string, and then later using it as an element reference. IE must be smart enough to search the DOM and find an element with an ID matching the string.

Try this...

if (divs[i].id.match(pass)) {
    document.getElementById(pass).style.visibility = 'visible';
    divs[i].style.visibility = 'hidden';
}

Or it could be that the String.match function is expecting a RegExp. If the above does not resolve your problem, try this...

if (divs[i].id.match(new RegExp(pass, 'gi'))) {

Answer 3

pass is an ID. In Firefox, element ids in the DOM aren't available as global references. You can't do id.style.visibility = 'visible'; Instead your function should look something like this:

function showDiv(pass) {
    var divs = document.getElementsByTagName('span');    
    for (i = 0; i < divs.length; i++) {
        if (divs[i].id.match(pass)) {
            divs[i].style.visibility = 'hidden';
        }          
    }
    document.getElementById(pass).style.visibility = 'visible';
}

You should be able to set the visibility of pass outside the loop since you only need to do it once.

Answer 4

    if (divs[i].id.match(pass)) {

Is pass really a regular expression? Seems unusual to be using match here.

        (pass).style.visibility = 'visible';

This makes no sense whether pass is a string or a regex; neither have a style property. Putting the variable in parentheses has no effect. It doesn't work in any browser for me, including IE.

I would guess you meant:

function showDiv(pass) {
    var divs= document.getElementsByTagName('span');    
    for (var i= 0; i<divs.length; i++)
        divs[i].style.visibility= divs[i].id==pass? 'visible' : 'hidden';
}

Note also the var i: this is necessary to stop i becoming a global variable. It is a very common source of weird errors when two for i loops start interfering with each other.