getElementById().getElementsByTagName() question

JavaScript
1

Hey, I’ve been trying working on this dhtml menu and I got it working except for one problem. Here’s the code:

function sub_toggle(mnu_id) {
var sub_menu = document.getElementById(mnu_id).getElementsByTagName('UL');
var menu_state = sub_menu.style.display;
if(menu_state!='none')
    {sub_menu.style.display="none";}
else
    {sub_menu.style.display="block";}
}
function menu_toggle(mnu_id) {
sub_toggle(mnu_id);
}

here’s the html:

<div class="nav">
<ul>
<div id="sub1" >
<li><a href="#" onClick="menu_toggle('sub1')"><img src=mainup.gif name="main" border=0></a></li>
	<ul>
	<li><a href="updates.html" target="main_window">Recent Updates</a></li>
	<li><a href="#" target="main_window">About</a></li>
	</ul>
	</div>

and CSS:

.nav #sub1 {
margin: 0px;
padding: 0px;
font-size: .7em;
}
.nav #sub1 a:link {
}
.nav #sub1 ul {
display: none;
}

now this code WORKS great when I just take the id out from above the link and stick it in the <ul> tag and just keep the javascript like this:

function sub_toggle(mnu_id) {
var sub_menu = document.getElementById(mnu_id);
var menu_state = sub_menu.style.display;

but it doesn’t work when I do the getElementById().getElementsByTagName(); it keeps coming back with “sub_menu.style has no properties”. This I don’t understand because I know the id is being passed onto both the <a> and the <ul> because I’ve tested it in the CSS, so I don’t get why it won’t work when I do getElementById(mnu_id).getElementsByTagName(‘UL’).

If someone could tell me if am doing anything wrong here or knows why this doesn’t work I would really appreciate it. Thanks in advance.

2

getElementsByTagName(‘UL’) returns an array of tags…
so in order to get it to work you have to do:
var menu_state = sub_menu[0].style.display; // first ul

3

getElementsByTagName returns an array of elements, not just one element. So you need to process each item in the array.

4

really? Is that it!?

I thought by appending it to getElementById it narrowed down the tags to only those under the id. If this isn’t true do I even need getElementById?

5 
function sub_toggle(mnu_id) {
var sub_menu = document.getElementById(mnu_id).getElementsByTagName('UL');
var menu_state = sub_menu[0].style.display;
if(menu_state!='none')
    {sub_menu[0].style.display="none";}
else
    {sub_menu[0].style.display="block";}
}

the .getElementById(mnu_id). narrows theUL elements to those within the div ‘sub1’

6