Below is a stripped down example of code I'm using to count links in a
list. My intent with the ShowLinkNumber() function was to display the
number of the current link. (e.g. click on link 2, and the message "2"
pops up; click on link 4, and you see a "4.")
For reasons I can't trace, my function always displays the last number
in the list. Why does it do this, and can anyone suggest a way to
achieve my goal without adding markup?
<html>
<head>
<script type="text/javascript">
<!--
function ShowLinkNumber()
{
var links = document.getElementsByTagName("li");
for ( var i=0; i < links.length; i++ )
{
if ( links[i].getElementsByTagName("a")[0] )
{
links[i].getElementsByTagName("a")[0].onclick = function()
{
alert(i);
};
}
}
}
window.onload = function()
{
ShowLinkNumber();
};
//-->
</script>
</head>
<body>
<ul>
<li>
<a href="#">do</a>
</li>
<li>
<a href="#">re</a>
</li>
<li>
<a href="#">mi</a>
</li>
<li>
<a href="#">fa</a>
</li>
<li>
<a href="#">sol</a>
</li>
</ul>
</body>
</html>
