Getting the clicked element in an onclick handler

[jhsachs]

I've got an event handler for onclick which is called by a tag like

 

<a onclick="return SetLoad();" href="...">

 

and it needs the value of href.

 

This should be simple, right? When an event handler is called, I've read, this refers to the object associated with the event. In this case it should refer to the anchor tag that was clicked.

 

But it isn't so. When Firebug stops execution at a breakpoint in the event function, its watch tab tells me that this refers to the Window object.

 

As an alternative, I've been referring to document.activeElement. That seemed to work well, but now I've discovered a group of anchor tags for which it doesn't work. I see nothing different about them, but their document.activeElement refers to the page's body rather than the clicked anchor.

 

I know I can find the anchor by defining an id for each anchor,  passing it to SetLoad, and calling getElementById on it. I want to avoid that because there are hundreds of anchors on dozens of pages. It would take hours to code them all, and probably hours more to find and fix the occasional errors.

[jhsachs]

Later... I think I know what the problem is, but I need advice to solve it.

 

The misbehaving anchors contain <img> tags instead of text. When I use Firebug's "highlight the clicked element" feature, it highlights the <img> tag rather than the anchor tag.

 

If I had a pointer to the <img> tag I believe I could get the anchor tag by getting its parent. But as I said, this points to the body, not the anchor or the <img>, so I can't use that.

[DavidAM]

Have you tried:

 

<a onclick="return SetLoad(this);" href="...">

 

and then reference the parameter in your function

 

function SetLoad(theTag) {
}

 

[jhsachs]

I don't understand. What does "theTag" represent? Or if it's not intended to be a placeholder, where it is defined?

[DavidAM]

<a onclick="SetLoad(this);" href="...">

 

Here, when the user clicks the line (the A tag), we call a function. The function's name is "SetLoad" and we are passing it a single argument. The argument we are passing is "this" which is the JavaScript object that is calling this function.

 

 

 

function SetLoad(theTag) {
}

 

Here, we define the function that we are calling from the onClick event above. The function name has to be the same: "SetLoad". But we can name the parameter anything we want to here. So inside the function, you use "theTag" as if it was the "this" variable that you were expecting in your original post.

 

 

In this scope (inside the function) the "this" object will still reference the document. So we had to pass in "this" at a point where it referenced the Anchor so the code in the function can know who called.

 

[jhsachs]

Thank you; SetLoad(this) makes sense, and works.

 

JavaScript's scoping rules don't entirely make sense to me, but that may just be because I'm not used to running programs in a browser.

[.josh]

"this" refers to the the invoked object.  When you click on a link, "this" refers to the link object, but when you call a function within the onclick attrib and the function is running, you are no longer within the scope of the link object, so while the function is running, "this" refers to the function.  So as DavidAM pointed out, you must pass the link's object to the function as an argument to the function, so that you can refer to it in the object.