Need To Get The Id From A Link With The Classname = Findex

[Monkuar]

var links = document.getElementsByClassName('findex');
for(var i = 0; i<links.length; i++) {
//Do whatever you want with the links
links[i].onclick = function(){
alert(links[i].id);
}
}

 

 

I have links like

 

<a href=f.php?id=2 id='2' class='findex'>test</a>

 

these are the forum names and their links.

 

I have around 20 of these on the main page.

 

the above code WORKS fine, but it's not alerting with the id for each link? when someone clicks on any link with the classname = 'findex' i need to grab the id of that link, so the above should spit out "2" since it's id=2 of that link, but it doesnt. if I remove the it just says undefined, any help?

 

Thanks

Edited September 28, 2012 by Monkuar

[Christian F.]

Your problem is that when the anonymous function is executed links doesn't exist any more. You need to send the object calling the function along as a parameter to the function, and then reference it inside the function.

jQuery has some manuals on how to do this, and I recommend using it as it'll help make things easier for you.

[jazzman1]

@Monkuar, you have to use "this" object.

Example:

var links = document.getElementsByClassName('findex');
for(var i = 0; i<links.length; i++) {
//Do whatever you want with the links
links[i].onclick = function(){
alert(this.id);
}
}

 

@Christian, are you sure about your writing?

Edited September 28, 2012 by jazzman1

[Adam]

Javascript automatically imports all variables from it's parent scope(s), Christian.

 

jazzman1's solution should work fine for you. An anonymous function bound to an event is always executed in the context of the DOM object. So this refers to the link.

 

It is possible to do it in the way you were trying though. The problem was that, for the same reason you have access to the links array, the anonymous functions always has access to i. So as you loop through, i is being incremented and each function is reading the same variable. What you should have seen is the last ID in the array of links being alerted 20 or so times over.

 

The solution to that is to use an 'anonymous, immediately invoked function', that will form a closure around the current value of i:

 

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

[Adam]

What you should have seen is the last ID in the array of links being alerted 20 or so times over.

 

Sorry, wasn't thinking when I wrote that. What you should have seen is clicking any of the links alerted the last ID in the array. Here's a fiddle that demonstrates it.