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

What wrong with the code

P: n/a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<script defer="false" type="text/javascript">
function initNavlists(){
var nav = document.getElementById('navlist');
if (nav){
var links = nav.getElementsByTagName('a');
for (var i=0;i<links.length;i++)
{
var str = links[i].innerHTML;
//alert(str);
links[i].onclick = function(){ alert(str); };
}
}
}

initNavlists();
</script>
</body>
</html>

Why i always get the last item in the alert box?
How to get the rest?
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a


John Smith wrote:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<script defer="false" type="text/javascript">
function initNavlists(){
var nav = document.getElementById('navlist');
if (nav){
var links = nav.getElementsByTagName('a');
for (var i=0;i<links.length;i++)
{
var str = links[i].innerHTML;
//alert(str);
links[i].onclick = function(){ alert(str); };


How about
links[i].onclick = function (evt) { alert(this.innerHTML); };
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2

P: n/a
John Smith wrote:

[snip]
<script defer="false" type="text/javascript">
Last time I looked, defer was a boolean attribute. A boolean attribute
does not have "true" and "false" values: its presence means "true" and
its absence "false". You seem to want the latter so don't include the
attribute at all.

The defer attribute can only have one value - defer. That is,

<script type="text/javascript" defer="defer">

In HTML, the value can be omitted entirely.
function initNavlists(){
var nav = document.getElementById('navlist');
if (nav){
var links = nav.getElementsByTagName('a');
for (var i=0;i<links.length;i++)
{
var str = links[i].innerHTML;
//alert(str);
links[i].onclick = function(){ alert(str); };
}
}
}
Don't forget to feature-detect[1] those DOM methods before using them.

[snip]
Why i always get the last item in the alert box?


The function expression you assign to the onclick property forms a
closure preventing the str variable, among other things, from being
garbage collected. Even though the function objects will be unique,
they will all have the same scope chain sharing the same variables. In
other words, str will be the same for all of them, and by the end of
the loop, str will contain the innerHTML value of the last link.

Though you could take a more complex route to solve this, it would
just be a waste of memory and time. The simplest thing to do is to
refer to the innerHTML property directly:

function initNavLists() {
function listener() {
alert(this.innerHTML);
}

/* ... */

for(var i = 0, n = links.length; i < n; ++i) {
links[i].onclick = listener;
}
}

Notice that the this operator will refer to element on which the
listener function was fired.

Hope that helps,
Mike
[1] <URL:http://www.jibbering.com/faq/faq_notes/not_browser_detect.html>

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

P: n/a
"John Smith" <so*****@nospam.com> wrote in message
news:42**********@news.tm.net.my...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<script defer="false" type="text/javascript">
function initNavlists(){
var nav = document.getElementById('navlist');
if (nav){
var links = nav.getElementsByTagName('a');
for (var i=0;i<links.length;i++)
{
var str = links[i].innerHTML;
//alert(str);
links[i].onclick = function(){ alert(str); };
}
}
}

initNavlists();
</script>
</body>
</html>

Why i always get the last item in the alert box?
How to get the rest?


Change links[i].onclick = function(){ alert(str); };
To links[i].onclick = function() { alert(this.innerHTML); };

Or:

<script defer="false" type="text/javascript">
function initNavlists(){
var nav = document.getElementById('navlist');
function clicked(s) { return function() { alert(s); } }
if (nav){
var links = nav.getElementsByTagName('a');
for (var i=0;i<links.length;i++)
{
var str = links[i].innerHTML;
//alert(str);
links[i].onclick = clicked(s);
}
}
}
initNavlists();
</script>

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.