ID not being passed to function : undefined, why?

[nicolanicola]

I am making a drop down menu in javascript using a function in an external js file. Problem is in FF error console it keeps coming up that my ID that's being called in getElementByID in the function is not defined.

Am tearing my hair out. I am quite a newbie to all this so nothing too complicated please!! Just wondering why it is reading the ID name when it is passed into it when the function is called.

HTML:

<div id="menu_nav">


<div id="home" class="flMen"><a href="index.html" onmouseover="showSubMenu(homeSubMenu)">HOME ></a></div>
<div id="services" class="flMen"><a href="services.html" onmouseover="showSubMenu(servicesSubMenu)">SERVICES ></a></div>

<div id="portfolio" class="flMen"><a href="portfolio.html">PORTFOLIO ></a></div>
<div id="class" class="flMen"><a href="about.html">ABOUT ></a></div>

</div>
<div id="homeSubMenu" class="flMen">
</div>

<div id="servicesSubMenu" class="flMen">
<div><a href="video.html">Video ></a></div>
</div>

In the css I have marked servicesSubMenu as display:none.

Here is JS

function showSubMenu(chosenMenu)
{
alert("hi")
var submenu=document.getElementById(chosenMenu);
if(submenu.style.display=="block")
{

submenu.style.display="none"
}else{
submenu.style.display="block"
}

}



Please help if you can, why is saying my ID is undefined?????

[Mandarin]

I am quite a newbie to all this so nothing too complicated please!!
Don't be so modest, you posted a link to your for-profit web design firm in another thread so you're clearly no newbie, right?

Anyway, getElementById expects a string. When you're sending a value to the showSubMenu function, simply surround the ID name in single quotes to make it a string, like so:

onmouseover="showSubMenu('homeSubMenu')"

Also, right now your script will toggle menu areas on or off each time you mouseover a link. If that's not the desired behavior, you might want to display each submenu on mouseover and then hide it with a separate function on mouseout.

[nicolanicola]

Don't be so modest, you posted a link to your for-profit web design firm in another thread so you're clearly no newbie, right?

Anyway, getElementById expects a string. When you're sending a value to the showSubMenu function, simply surround the ID name in single quotes to make it a string, like so:

onmouseover="showSubMenu('homeSubMenu')"

Also, right now your script will toggle menu areas on or off each time you mouseover a link. If that's not the desired behavior, you might want to display each submenu on mouseover and then hide it with a separate function on mouseout.

What? I am, what you trying to say that I'm trying to drum up business? I clearly am or I wouldn't have to ask you advice on simple js stuff.

It was the quotes, I managed to get it working except I don't want it doing that, it's moving everything down the page, I want a menu that will be displayed over the text that's already there, not push it down.

[Mandarin]

Your hidden menus (the divs that are set to display: none) should also have the style position: absolute so that they're taken out of the flow of the document and don't affect the position of elements around them.

[nicolanicola]

Your hidden menus (the divs that are set to display: none) should also have the style position: absolute so that they're taken out of the flow of the document and don't affect the position of elements around them.

Ahh right, thanks very much. I haven't learned what absolute and relative means yet.