Use an argument with event-handler in script

[rooboy09]

Hello, from an "almost-newbie".

I have been using inline event-handlers so that when a user hovers over a menu link, text appears in a box describing the link.


// javascript in head of menu.html

function textDisplay(desc){
document.getElementById('descriptionBox').innerHTML = desc;
}

// menu.html

<ul>
<li><a href="index.html" onmouseover="textDisplay('Home page')">Home</a></li>
<li><a href="about.html" onmouseover="textDisplay('About me')">About</a></li>
</ul>

<div id="descriptionBox"></div>


Now I'm making my markup more semantic by referencing the links with an external javascript, but how do I pass textDisplay() an argument telling it which link it is?


// external menu.js

navLinks = document.getElementById("menu").getElementsByTagName("li");
navLinks.onmouseover = textDisplay; // THIS IS THE POINT I NEED HELP WITH

function textDisplay(???){
document.getElementById("descriptionBox").innerHTML = ???;
}
// menu.html with no event handlers in xhtml

<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="home.html">Home</a></li>
</ul>

<div id="descriptionBox"></div>


I am a self taught newbie, hope this isn't wasting anyone's time!

Many thanks

[TinyScript]

<script>

window.onload=function(){
var navLinks = document.getElementById("menu").getElementsByTagName("li");



for (i=0;i<navLinks.length;i++){

navLinks[i].onmouseover=function(){ var txt=this.innerHTML; textDisplay(txt)};
}
}
function textDisplay(t){
document.getElementById("descriptionBox").innerHTML = t;

}
</script>

<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="home.html">Home</a></li>
</ul>

<div id="descriptionBox"></div>

[rooboy09]

Hi TinyScript, many thanks for the quick reply

I havent given you enough information, my fault.

The text to appear in "descriptionBox" was originally more than just the link name, and was textDisplay()'s argument, so:
"Home page" for Home and "About me" for About.
The inner.HTML way you have shown me puts the link's name there only.

I have a feeling the answer lies in an array, but I don't know how to match the iterated [i] of navLinks with an array[i] string INSIDE that interior function

Once again, my apologies for not making the strings clearer.

[Kor]

I would simplify as:

onload=function(){
var navLinks = document.getElementById('menu').getElementsByTagName('li'), i=0, li;
while(li=navlinks[i++]){
li.onmouseover=textDisplay;
}
}
function textDisplay(){
document.getElementById("descriptionBox").innerHTML=this.innerHTML;
}

And that answers the main question of rooboy09: the argument you were looking for is not an argument, it is the special javascript referential keyword - this, which will refer the current object on which a method (in your case the event attached is a method as it calls / it is assigned to a function) was applied.

[Kor]

Regarding the iteration itself, a special problem arises (to prevent your possible next question): how to pass the iterator as an argument? There are several ways, but probably the simplest way is to create a custom property of the object which will "glue" the iterator's value on each loop round:

var navLinks = document.getElementById('menu').getElementsByTagName('li'), i=0, li;
while(li=navlinks[i++]){
li.ind=i-1;
li.onmouseover=function(){alert(this.ind)};
}