access events of objects in an array

[ReMaX]

Heyho,
I've tried to write a jscript function with parameters for every link in a certain list. The script works fine but I cannot write the events?!
Simple example:


<ul id="menu">
<li><a href="#"><span>willkommen</span></a></li>
<li><a href="#"><span>olfdsre</span></a></li>
<li><a href="#"><span>lkjhre</span></a></li>
<li><a href="#"><span>dskjhre</span></a></li>
<li><a href="#" class="active"><span>ohre</span></a></li>
<li><a href="#"><span>olfd</span></a></li>
<li><a href="#"><span>olfdkjhre</span></a></li>
</ul>

<script type="text/javascript">
var menucontainer;
var linklist = new Array(16);
var z=0;

if (document.all)
menucontainer = document.all["menu"];
else if (document.getElementById)
menucontainer = document.getElementById("menu");

linklist = menucontainer.getElementsByTagName("a");

for (z=0;z<=linklist.length-1;z++)
{
linklist[z].onMouseOver = alert("test"); // works only one time: when loading script!
}
</script>

If I write "onMouseOver" as parameter in every link it works, of course, but the links are generated out of a database and the output is like in the structure above. I also do not want to write more than necessary in the great xhtml structure of my design :cool:!
I thought that would be the most easiest thing but - I am a JS beginner :rolleyes:.
Help, please!

greetings
Max

[jscheuer1]

Your two main problems are that:


In javascript, event names are all lowercase, onmouseover, not onMouseOver.
You must assign a function, onmouseover=function(){alert('test');};


There look to possibly be other problems. One thing is that the array length doesn't match its later size, but it may be overwritten so that might not matter. Another is that if document.all is supported and not document.getElementById, as your script allows for, document.getElementsByTagName will not work.

This is pretty good:


<ul id="menu">
<li><a href="#"><span>willkommen</span></a></li>
<li><a href="#"><span>olfdsre</span></a></li>
<li><a href="#"><span>lkjhre</span></a></li>
<li><a href="#"><span>dskjhre</span></a></li>
<li><a href="#" class="active"><span>ohre</span></a></li>
<li><a href="#"><span>olfd</span></a></li>
<li><a href="#"><span>olfdkjhre</span></a></li>
</ul>

<script type="text/javascript">
;(function(){
if(document.getElementById){
var menucontainer = document.getElementById("menu");
var linklist = menucontainer.getElementsByTagName("a");
var doit=function(){alert("test");};
for (var z=0;z<linklist.length;z++)
linklist[z].onmouseover = doit; // works!
}
})();
</script>

Making it an anonymous function (red parts) simply protects its variables from the global scope, and may be skipped.

[Twey]

What was the leading empty statement for?

[jscheuer1]

What was the leading empty statement for?

When anonymous functions are added to poorly written code that otherwise works, it will avoid an error.

[ReMaX]

Thanks, Jscheuer1! Of course, I have already packed everything in an external .js-file and in functions. At the end of my page code I only write <script type="text/javascript">linkinit();</script> to execute the script, start loving javascript and I am finished with this problem.
I made this script because the client needs a menu on which the linktext of the linklogo on which you were with you mouse last stays visible.
For further visitors (see html-structure above):


var typecontainerid="menu";
var menucontainer;
var linklist = new Array(16);


function linkinit()
{
var i=0;
var mouseover;

menucontainer = document.getElementById(typecontainerid);

linklist = menucontainer.getElementsByTagName("a");

for (i=0;i<linklist.length;i++)
{
mouseover = function() { lastlink(this.getElementsByTagName("span")[0].firstChild.data,menucontainer); };
linklist[i].onmouseover = mouseover;
}
}

function lastlink(linkname,container)
{
var i=0;
for (i=0;i<=linklist.length-1;i++)
{
if (linkname==linklist[i].getElementsByTagName("span")[0].firstChild.data)
linklist[i].getElementsByTagName("span")[0].style.display = "block";
else
linklist[i].getElementsByTagName("span")[0].style.display = "none";
}
}

By the way, the menu is generated by wayfinder, a snippet for MODx (http://www.modxcms.com), an open source cmf which I can recommend every cms developer!!!

[Twey]

When anonymous functions are added to poorly written code that otherwise works, it will avoid an error.Ah, neglected semicolon on the last line. Smart, in a way :)