Why when i click a <a> with pure javascript, "this" returns a url and the array returns "undefined"? [duplicate]

Question

I am not using libraries like Jquery. This is what i have:

HTML:

<a href="#aid" class="nav-link"> A link </a>
<a href="#anotherid" class="nav-link"> Another link </a>
<a href="#oneidmore" class="nav-link"> One more link </a>

Javascript:

var links = document.getElementsByClassName("nav-link");
for(var i = 0; i < links.length; i++) {
    links[i].onclick = function(){
        alert(this); // Returns a url
        alert(links[i]); // Returns "undefined"
    };
};

What i am looking for, is get the respective element that i am clicking. And then, get the href attributte (just the ID that contains), etc.

What i am doing wrong?

PS: Sorry if the title is poor

EDIT:

I made a JSfiddle: http://jsfiddle.net/2DRrJ/

this doesnt return a ur. it returns the element. use console.log instead of alert. If you want to use i use a closure since your i has expired (value = links.length) by the time callback is invoked. Just do this.getAttribute("href") — PSL
– PSL, Commented Dec 18, 2013 at 3:07
the toString() of <A> tags is the url in some browsers. your for loop has no scope. — dandavis
– dandavis, Commented Dec 18, 2013 at 3:07
The way you attach events to elements using for will give you errors. Don't do that. — Derek 朕會功夫
– Derek 朕會功夫, Commented Dec 18, 2013 at 3:12
As someone else mentioned, this is a common trouble that stems from how JavaScript scopes closure variables. This tweak to your JSFiddle is one way that you could isolate i so that it will be what you expect when the event handler is triggered later: jsfiddle.net/2DRrJ/1 — Dave Ward
– Dave Ward, Commented Dec 18, 2013 at 3:17

dee-see · Accepted Answer · 2013-12-18 03:19:46Z

3

this is the <a> element as you expected, the URL is its .toString() value.

As for the undefined link[i], it's because the i variable is equal to links.length at the end of the loop's execution and links[links.length] is indeed undefined. This is a result of how scoping (and hoisting) works in JavaScript.

edited Dec 18, 2013 at 3:19

answered Dec 18, 2013 at 3:10

dee-see

24.1k6 gold badges63 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Derek 朕會功夫 Over a year ago

@hicurin - The last i will be equal to links.length because of i++.

Collectives™ on Stack Overflow

Why when i click a <a> with pure javascript, "this" returns a url and the array returns "undefined"? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related