Javascript for loop and alert

I am looping through a list of links. I can correctly get the title attribute, and want it displayed onclick. When the page is loaded and when I click on a link, all of the link titles are alerte开发者_如何学God one by one. What am I doing wrong?

function prepareShowElement () {
var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onclick = alert(links[i].title);
    }
}

What you were doing was actually running the alert function. enclosing the whole thing in an anonymous function will only run it when it is clicked

for (var i = 0; i < links.length; i++) {
    links[i].onclick = function () {
        alert(this.title);
       }
    }

You are assigning the onclick to the return value of alert(links[i].title); which doesn't make any sense, since onclick is supposed to be a function.

What you want instead is somethig like onclick = function(){ alert('Hi'); };

But

Since you are using a variable i in that loop you need to create a local copy of it onclick = function(){ alert(links[i].title); }; would just use the outer scope i and all your links would alert the same message.

To fix this you need to write a function that localizes i and returns a new function specific to each link's own onclick:

onclick = (function(i){ return function(e){ alert(links[i].title); }; })(i);

Final result:

function prepareShowElement () {
var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onclick = (function(i){ return function(e){ alert(links[i].title); }; })(i);
    }
}    

You can use jquery. To display title of the link on click.

$("#nav a").click(function() {
    var title = $(this).attr('title');
    alert(title);
});

links.forEach(function(link) {
    link.onclick = function(event) {
        alert(link.title);
    };
}

Also note that your original solution suffered from this problem: JavaScript closure inside loops – simple practical example

By passing in our iteration variable into a closure, we get to keep it. If we wrote the above using a for-loop, it would look like this:

// machinery needed to get the same effect as above
for (var i = 0; i < links.length; i++) {
    (function(link){
        link.onclick = function(event) {
            alert(link.title);
        }
    })(links[i])
}

or

// machinery needed to get the same effect as above (version 2)
for (var i = 0; i < links.length; i++) {
    (function(i){
        links[i].onclick = function(event) {
            alert(links[i].title);
        }
    })(i)
}

You need change .onclick for a eventlistener same:

function prepareShowElement () {
  var nav = document.getElementById('nav');
  var links = nav.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click',function() { 
        alert(links[i].title);
    },false);
  }
}