PDA

Click to See Complete Forum and Search --> : Making use of JS "getElementbyID" command

Xeenslayer
12-18-2002, 04:50 AM
Hi all I need some help here. I want to to have some links, and a few divisions. One link will correspond to one division. When I put my mouse over a link, it should make the corresponding division appear. I have tried several means but all to no avail. Only the first piece of code works, but that's too troublesome.

Here's the code which I currently have and want to change. Here I show just one link and division for covenience.

______________________________

<head>
<title>Change visibility of Divisions</title>
</head>

<body>

<a href="bah.html" onMouseOver="document.all.div1.style.display='block'; return true"; onMouseOut="document.all.div1.style.display='none'">Put your Mouse Cursor over this link!</a>

<br><br>

<div ID="div1" style="display:none">This will be the description for the link.</div>

</body>
______________________________

I will have several links and different descriptions for each one, so I wouldn't want to use the code inside the Anchor tag. What I would like are two functions.

For example, I put the following command inside the A tag instead of the current one:
______________________________

<a href="bah.html" onMouseOver="appear('div1'); return true"; onMouseOut="disappear('div1')">Put your Mouse over this link!</a>
______________________________

I realised that I need to use the getElementbyID code inside a JavaScript. However, I have absolutely no idea how to use it. I tried a few pieces of code similar to this but I realised that they don't make any sense and certainly don't work.
______________________________

<head>
<title>Change visibility of Divisions</title>

<script language="JavaScript">

function appear('division')
{
document.getElementbyID('division').style.display="block";
}

function disappear('division')
{
document.getElementbyID('division').style.display="none";
}

</script>

</head>
______________________________
Rick Bull
12-18-2002, 05:12 AM
You have the case of the "D" in Id wrong, document.getElementbyId should work. Also you have unneed quotes:


function appear(division)
{
document.getElementbyId(division).style.display="block";
}

function disappear(division)
{
document.getElementbyId(division).style.display="none";
}
Xeenslayer
12-18-2002, 08:14 AM
I changed but it still doesn't work, Rick. Here's the full script:
______________________________

<html>

<head>

<title>JavaScript -- Appearing description.</title>

<script language="JavaScript">

function desc_app(division)
{
document.getElementbyId(division).style.display="block";
}

function desc_dis(division)
{
document.getElementbyId(division).style.display="none";
}

</script>

</head>

<body>

<a href="bah.html" onMouseOver="desc_app('div1'); return true;" onMouseOut="desc_dis('div1')">Mouseover!</a>

<br><br>

<div ID="div1" style="display:none">This description corresponding to the link should appear</div>

</body>

</html>
______________________________

So what's the problem in here?
Xeenslayer
12-18-2002, 08:25 PM
Aha! :):):) I've got it!

Thanks, Dave and Rick. :)

I've got another question. What are the common uses for getElementById command in JS?
Xeenslayer
12-19-2002, 03:34 AM
No, um, I mean for design purposes.

For example... menu bars?... Are they done using getElementById?
Xeenslayer
12-19-2002, 07:45 AM
Mmm... I see... Thanks! :)