Why does this piece of javascript work on both Google Chrome and IE but not in Firefox?

I'm quite new to javascript programming and got stuck in this problem: I have a div displaying a map made with flash. This flash features a magnifying glass icon, that when clicked, calls this javascript:

function turnMap() 
{
    DivSwitcher(map.id);
    DivSwitcher(rightcolumn.id);
    DivSwitcher(leftcolumn.id);
}

function DivSwitcher(layer) 
{
    if (document.getElementById(layer).style.display != "none")
        document.getElementById(layer).style.display = "none";
    else
        document.getElementById(layer).style.display = "block";
}

All the called divs do exist, but the div with the map id is set with display: none. On both IE and Chrome, this code works just fine: the divs get hidden or displayed as I want, but on Firefox, it doesn't happen. I tried running with FireBug to see what happens:

map is not defi开发者_StackOverflowned

If you guys could give me any leads I would appreciate it.

That is because the JavaScript variable map is not defined in the current scope, and that's all I can tell from your code.

My guess is that you are trying to access an element by calling its name, which is not supported. Maybe you can try:

    DivSwitcher('map');
    DivSwitcher('rightcolumn');
    DivSwitcher('leftcolumn');