Forgive the title, wasn't sure what to put.

I have some code like:

var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
    var cur=links[i];
    cur.onmouseover=function(){alert(i);};
}

I remember seeing something like this before, but I have no clue how I would go about finding it. If another question like this has been asked, I would be far from surprised and would appreciate the link.

edit: the problem is that it always alerts what 'i' is after the loop finishes. If there are two links, they all alert 2.

edit: I remembered seeing it here: /. Great few lessons, I suggest anyone who hasn't already to do them.

Forgive the title, wasn't sure what to put.

I have some code like:

var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
    var cur=links[i];
    cur.onmouseover=function(){alert(i);};
}

I remember seeing something like this before, but I have no clue how I would go about finding it. If another question like this has been asked, I would be far from surprised and would appreciate the link.

edit: the problem is that it always alerts what 'i' is after the loop finishes. If there are two links, they all alert 2.

edit: I remembered seeing it here: http://nathansjslessons.appspot./. Great few lessons, I suggest anyone who hasn't already to do them.

• javascript
• html

• 1 That's very nice code ... what do you want it to do exactly? – zellio Commented Sep 7, 2011 at 22:03
• 1 What's the question? The code you posted will work fine. – James Allardice Commented Sep 7, 2011 at 22:03
• Well, this isn't the actual code, just the basics so that people can understand what I want. It's supposed to make each 'a' element alert it's place in the array of all 'a' elements when the mouse is over it. – mowwwalker Commented Sep 7, 2011 at 22:04

3 Answers 3

Try this:

var links=document.getElementsByTagName('a'); 
for(var i=0;i<links.length;i++){     
    var cur=links[i];     
    cur.onmouseover=function(a){
        return function(){
            alert(a);
        }
    }(i); 
} 

You can actually use Array.forEach:

var links=document.getElementsByTagName('a'); 
[].forEach.call(links, function(cur, i) {
    cur.onmouseover = function() { alert(i); };
})

The trick is using .call(), passing links as the this parameter.

You'll need to add .forEach() for older browsers that don't support it natively.

This is a more reusable solution. remember the 3 r's reduce reuse recycle ;) it overflows into real life. see which is quickest optimization fun! http://jsperf./speed-test-for-links-script

var links       = document.getElementsByTagName('a'); 
var linksLength = document.getElementsByTagName('a').length //cache the length means quicker for loop

var addMouseOver = function(i){
    links[i].onmouseover=function(){
        alert(i);
    };
} //extract the function

for(var i=0;i<linksLength;i++){     
    addMouseOver(i);
}