48
<a href="" id="someId" onclick="SomeMethod(self);"></a>

Where SomeMethod could have:

function SomeMethod(item)
{
  item.setAttribute('name', item.id);
}

Instead of:

function SomeMethod(itemId)
{
  var someItem;

  someItem = document.getElementById(itemId);
  someItem .setAttribute('name', someItem .id);

}

Silly example, but the idea is not to send in the id itself, but the actual control calling the method. I swear this can be done but have had no luck searching... partially because I'm not even sure what to search on.

I thought it was self, but self doesn't seem to be what I want when the script I have runs.

4 Answers 4

69

Use the this Keyword.

<a href="" id="someId" onclick="SomeMethod(this);"></a>
1
  • 6
    I knew it was something simple. Kind of felt dirty asking but oh well. Commented Mar 6, 2009 at 17:13
16

You actually don't need to pass this as an argument to your function, because you've got a click event object that you can access. So:

<a href="" id="someId" onclick="clickEventHandler()"></a>
<script>
function clickEventHandler(event) {

    if (!event) {
        event = window.event; // Older versions of IE use 
                              // a global reference 
                              // and not an argument.
    };

    var el = (event.target || event.srcElement); // DOM uses 'target';
                                                 // older versions of 
                                                 // IE use 'srcElement'
    el.setAttribute('name', el.id);

}
</script>
8

I tend to use this approach in all function calls from HTML attributes:-

onclick="SomeMethod.call(this)"

Then in the javascript do:-

function SomeMethod()
{
   this.setAttribute('name', this.id);
}

This has a distinct advantage when you may also assign directly to event handler properties in Javascript code:-

document.getElementById("someID").onclick = SomeMethod

If SomeMethod took the context element as a parameter it would very awkward to set up:-

function(id) {
   var elem = document.getElementById(id)
   elem.onclick = function() { SomeMethod(elem); }
}("someID");

Worse yet this would be memory leaking closure.

1
  • Elegant and flexible solution.
    – Alex
    Commented Jan 13, 2020 at 10:29
2

At this point: SomeMethod(this) - this returns window object so do not use it. The right way to use this keyword is making it context relevant, so use SomeMethod.call(this).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.