Javascript Working On Firefox But Not In Chrome And Ie6

I have javascript that working fine in Firefox 3.x.x, but it does not work in IE*, Chrome, Safari. Simple alert work before calling function. Here is the code function showDiv(div

Solution 1:

The syntax looks okay to me.

Make sure there are not multiple elements with the same ID in the document and that your element IDs are valid.

Solution 2:

There is nothing inherently wrong in the code you have posted. I suggest you post a reproduceable non-working example: the problem will be elsewhere in the page. Maybe the div ID string isn't unique (this is invalid HTML and will make behaviour unreliable); maybe there's some other script interfering, maybe you have event code firing this that's not written in a cross-browser way

However your attempts to hide an element in three different ways seem like overkill to me. Just a single display change would do it fine.

Another way to do it is to set className='hidden' or '', and use a CSS rule to map that class to display: none. The advantage of this is that you don't have to know whether the element in question is a <div> (that should revert to display: block), a <span> (that should revert to display: inline) or something else. (The table-related elements have particular problems.)

Solution 3:

Maybe you could try that:

functionshowDiv(div) {
    var obj = document.getElementById(div);
    if (obj) {
        obj.style.display = "block";
        obj.style.height = "auto";
    } else {
       alert("DIV with id " + div + " not found. Can't show it.");
    }
}

functionhideDiv(div) {
    var obj = document.getElementById(div);
    if (obj) {
        obj.style.display = "none";
    } else {
       alert("DIV with id " + div + " not found. Can't hide it.");
    }
}

Do not call document.getElementById several times in the same function, use a variable to store the div element.

The if (obj) test will only execute the code if it has been found by document.getElementById(...).