Javascript style error

style.display onmouseover javascript

[ceestand]

I'm having an issue with some JS functionality I wrote. I don't know what the error is, as I've written similar things in the past sucessfully, but I suspect bad JS form.

here's the Javascript:

var mold;
function ShowSubNav(primaryNav)
{
if(!(mold == null))
{
mold.style.display = "none";
//alert("null");
}
if(document.getElementById)
{
var translation = primaryNav.replace("pri", "sub");
mold = document.getElementById(translation);
mold.style.display = "block";
}
}
function HideSubNav(subBar)
{
if(document.getElementById)
{
mold.style.display = "none";
}
}

I have two sets of elements, I want to changeboth when I rollover the first (I also use CSS to change some elements of the first), and only change the second item after I roll off it. The functions are tied to the onmouseover and onmouseout events. The first set has corresponding IDs to the second set with a prefix change.

It works fine in Firefox 1.0.3, also works in IE7, but sometimes(?) displays the "page loaded with errors" icon at the bottom, but throws 'mold.style' is null or not an object in IE6. It also breaks my a:hover CSS style on the first element in IE6.

This has to be my sloppy code, but I can't seem to figure it out.

[ceestand]

Nevermind. After posting, I changed to the following, and it works fine:

var mold;
function ShowSubNav(primaryNav)
{
if(document.getElementById)
{
if(!(mold == null))
{
mold.style.display = "none";
//alert("null");
}
var translation = primaryNav.replace("pri", "sub");
mold = document.getElementById(translation);
mold.style.display = "block";
}
}
function HideSubNav(subBar)
{
if(document.getElementById)
{
mold.style.display = "none";
}
}

Just put the mold == null check in the document.getelementbyid check and it works.