By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,600 Members | 1,861 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,600 IT Pros & Developers. It's quick & easy.

looping variables in a function literal

P: n/a
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>

Oct 19 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a

2obvious wrote:
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>
Your alert always shows the last number in the list because "i" is a
variable..well..that varies. Whatever the last value of "i" is the one
that will be assigned at the end.

To fix this behavior, replace the following:
if ( links[i].getElementsByTagName("a")[0] )
{
links[i].getElementsByTagName("a")[0].onclick = function()
{
alert(i);
};
}


if(links[i].getElementsByTagName("a")[0])
{
attachClick(links[i].getElementsByTagName("a")[0], i);
}

Then create a function:

function attachClick(anchor, number)
{
anchor.onclick = function () { alert(i); };
}

Oct 19 '05 #2

P: n/a
Ah, just what I needed! I was struggling to find a way to force the
onclick event assignment to execute. Thanks for the helping hand.

--E.

Oct 19 '05 #3

P: n/a

web.dev wrote:
2obvious wrote:
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>
Your alert always shows the last number in the list because "i" is a
variable..well..that varies. Whatever the last value of "i" is the one
that will be assigned at the end.

To fix this behavior, replace the following:
if ( links[i].getElementsByTagName("a")[0] )
{
links[i].getElementsByTagName("a")[0].onclick = function()
{
alert(i);
};
}


if(links[i].getElementsByTagName("a")[0])
{
attachClick(links[i].getElementsByTagName("a")[0], i);
}

Then create a function:

function attachClick(anchor, number)
{
anchor.onclick = function () { alert(i); };

Oops, a typo. Should change that i to number. }


Oct 19 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.