ansaurus

Question

Get reference to anchor's dom element from javascript

Answer 1

+1 A:

Yes, and the answer is this which refers to current DOM element:

<a href="javascript:alert('Hello from ' + this.tagName);">Click me</a>

EDIT:

Of course as bobince mentioned (see comments) that won't work as excepted. The correct form is:

<a href="..." onclick="alert('Hello from ' + this.tagName);">Click me</a>

Crozin 2010-09-22 20:01:22

In Firefox, at least, that just gives me "Hello from undefined".

rampion 2010-09-22 20:05:12

Yes, `this` is not bound to an object in a `javascript:` link, so you get `window` (which of course doesn't have a `tagName`).

bobince 2010-09-22 20:08:20

Ahhh... of course I meant *onclick variant*. I was too lazy and copied/pasted random snipped from the question. ;)

Crozin 2010-09-22 20:24:36

Answer 2

+2 A:

Move the JavaScript to the onclick="yourJavaScriptHere" attribute. Then you can use the 'this' keyword to reference your anchor. So

<a href="#" onclick="alert('hello from '+this)">some text</a>

Although, that isn't very meaning. Additionally, it is a better practice to separate your JavaScript from your HTML to build a more maintainable website.

matt snider 2010-09-22 20:03:58

The `+this` here implicitly calls `toString()` on the `HTMLAnchorElement`, which returns the `href` value. I agree you are better off assigning the `click` handler from script than writing an inline event handler attribute. But either is preferable to the vile disgrace of `javascript:` links.

bobince 2010-09-22 20:10:22

@bobince: I'm obviously n00bish, could you elaborate on why `javascript:` links are a vile disgrace?

rampion 2010-09-22 20:18:32

They're terrible for usability and accessibility, and, if replacing a normal link, for SEO. Try to use any of the normal link affordances (like middle-click-for-new-tab, right-click-bookmark, drag-to-window etc) on a `javascript:` link and you'll get no response, a blank window, or a JavaScript error. There is nothing a `javascript:` link can do(\*) that an `onclick` event handler can't do just as easily and with less breakage.

bobince 2010-09-22 20:34:27

\*: in a web page, anyway. They are useful to end users for bookmarklets, although now we've got stuff like Facebook mal-apps trying trick the user into compromising themselves by pasting a bookmarklet, it's questionable whether this should continue to be allowed. In general, the problem is that `javascript:` represents a command to be executed in the current location, and *not* a location in itself. If you write software that assumes a URL is a location (which sounds reasonable, it's in the name!) and don't specifically account for `javascript:`, you've probably just written a security hole.

bobince 2010-09-22 20:38:36

Over the years there have been endless browser and webapp security problems caused by `javascript:` URLs. Given that they're not actually needed by web pages, and in fact are actively worse than every alternative, it is a great shame they were ever invented. Those were the days when Netscape added as many new features to their browser as they could, not because they were necessarily useful, but to screw over other browser manufacturers. We complain about IE now, but Netscape made a much worse mess than Microsoft ever did.

bobince 2010-09-22 20:40:02

@bobince: Thanks for the thorough explanation!

rampion 2010-09-23 17:28:47

Answer 3

+3 A:

Something like this?

Example: http://jsfiddle.net/TTzDb/

<a href="#" onclick="alert('hello from '+this.innerHTML)">me</a>

Using onclick, this will refer to the element that received the event.

patrick dw 2010-09-22 20:04:09

ansaurus

tags:

views:

answers:

Get reference to anchor's dom element from javascript

EDIT:

related questions