Why when i click a with pure javascript, "this" returns a url and the array returns "undefined"?

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, Dec 18 '13 at 03:07
the toString() of tags is the url in some browsers. your for loop has no scope. — dandavis, Dec 18 '13 at 03:07
The way you attach events to elements using `for` will give you errors. Don't do that. — Derek 朕會功夫, Dec 18 '13 at 03: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: http://jsfiddle.net/2DRrJ/1/ — Dave Ward, Dec 18 '13 at 03:17

dee-see · Accepted Answer · 2013-12-18T03:19:46.090

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 '13 at 03:19

answered Dec 18 '13 at 03:10

dee-see

23,668
5
58
91

3

@hicurin - The last `i` will be equal to `links.length` because of `i++`. – Derek 朕會功夫 Dec 18 '13 at 03:13

Why when i click a with pure javascript, "this" returns a url and the array returns "undefined"?

1 Answers1