What wrong with the code

John Smith · Feb 28, 2005

<!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.innerHTML;
//alert(str);
links.onclick = function(){ alert(str); };
}
}
}

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

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

Martin Honnen · Feb 28, 2005

John said:
<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.innerHTML;
//alert(str);
links.onclick = function(){ alert(str); };

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

Michael Winter · Feb 28, 2005

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.innerHTML;
//alert(str);
links.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?

Click to expand...

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.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>

Grant Wagner · Feb 28, 2005

John Smith said:
<!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.innerHTML;
//alert(str);
links.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.onclick = function(){ alert(str); };
To links.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.innerHTML;
//alert(str);
links.onclick = clicked(s);
}
}
}
initNavlists();
</script>

Problems with css menu options	2	Nov 19, 2025
Align separate li to right	2	Jun 19, 2024
Index.php with bootstrap implementation and extern sites inclusion	0	Oct 30, 2024
Javascript scroll to sections and also scroll to section but open relevant nav-tab	4	Feb 25, 2022
JavaScript code not working!!	6	Jun 13, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Only one table shows up with the information	2	Mar 29, 2023
Need help with code on website (noob)	2	Jul 18, 2022

What wrong with the code

John Smith

Martin Honnen

Michael Winter

Grant Wagner

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads