How to pass 'this' into a function using JavaScript

Question

I have the following code which is designed to create an onchange event handler for all elements with class name 'State'. The only problem is that I want the element to be passed into the StateChange function. How can I update this JS to pass 'this' into the StateChange function?

var c = document.getElementsByClassName('State');
for (i = 0; i < c.length; i++) c[i].onchange = createEventHandler( StateChange, c[i] );

Edit: I forgot to provide the createEventHandler function. Sorry about that... Here it is:

function createEventHandler(fn, input) {
      return function () {
          fn(input);
      };
}

Also, some clarification. The purpose of the function is to obviate the need to put the onchange event next to each element with class name = 'State'. The result should be the same as if I were to write:

<select id="MyState1" class="State" onchange="StateChange(this)">

looks like you've done it. c[i] should be the element you're referring to — LeleDumbo
– LeleDumbo, Commented Dec 2, 2011 at 8:39

BenMorel · Accepted Answer · 2013-11-17 20:58:57Z

6

Update:

Re your updated question: You've said that the end result you want is as though you'd done this:

<select id="MyState1" class="State" onchange="StateChange(this)">

Your quoted createEventHandler function does exactly that.

Original Answer(s):

I'm not entirely sure I know exactly what you're trying to do. I can read the question at least two ways:

Inside the StateChange function call, you want this to refer to the element that changed.
Inside the StateChange function call, you want this to be the same as this where you're setting up your event handler.

Option 1: You want `this` = element within `StateChange`

You don't actually have to pass the element instance into createEventHandler, because when the event occurs, this will refer to the element because of the way you're hooking it up. But if you prefer to set it explicitly, your createEventHandler function could look like this:

function createEventHandler(handler, element) {
    return function(event) {
        return handler.call(element, event || window.event);
    };
}

What that does is return a function that, when the event is triggered, will call the function you pass in (StateChange) with this set to the element you pass in.. This uses the JavaScript call feature of function objects, which allows you to define what this will be during the function call. You just pass it in as the first argument to call (subsequent arguments are passed on to the function being called).

If you want to rely on the fact that the way you're setting up the handler, this will already be set to the element instance, you can do away with the element argument:

function createEventHandler(handler) {
    return function(event) {
        return handler.call(this, event || window.event);
    };
}

That just passes along the this value set up for the event handler by the browser.

Option 2: You want `this` = `this` as of where you're setting up the handler

It's the same principle as the above, just with a different argument. In this case, you'll need to pass this in:

var c = document.getElementsByClassName('State');
for (i = 0; i < c.length; i++) c[i].onchange = createEventHandler( StateChange, this, c[i] );

...and then createEventHandler looks like this:

function createEventHandler(handler, thisArg, element) {
    return function(event) {
        return handler.call(thisArg, event || window.event, element);
    };
}

(Note I've passed in the element as a second argument to StateChange.)

6 Comments

Michael Swarts Over a year ago

I updated my question in important ways to be more clear. Thanks your your help.

T.J. Crowder Over a year ago

@Mike: No worries, hope this helped anyway. :-)

Michael Swarts Over a year ago

A short follow up on this... If I wanted to do the same thing for: <input type="text" onkeydown="return noNumbers(event)" /> , how can I set that up? I'm not sure how to specify to return that.

T.J. Crowder Over a year ago

@Mike: Like this: onkeydown="return noNumbers(event, this)" In noNumbers the element would be the second argument. Or if you like: onkeydown="return noNumbers.call(this, event)" and within noNumbers, this would refer to the element and it would receive just one argument (the event).

Michael Swarts Over a year ago

Oh, I didn't mean to ask how to pass 'this' from the event call. I meant to ask how to use JS to create an event handler for that element so that it returned noNumbers(event). My current createEventHander() doesn't do that. Like in the last case, I want the end result to be as if I had done this: <input type="text" onkeydown="return noNumbers(event)" />

|

rob · Accepted Answer · 2011-12-02 08:38:00Z

0

One way is:

var c = document.getElementsByClassName('State');
for (i = 0; i < c.length; i++) 
  c[i].onchange = createEventHandler(function(){
    StateChange(c[i]);
    });

answered Dec 2, 2011 at 8:38

rob

10.2k7 gold badges45 silver badges73 bronze badges

2 Comments

Yoshi Over a year ago

This would not work, as i would always refer to c.length + 1 and thus c[i] is undefined. If you want this to work, use a self-executing function, which returns a new function, passing it c[i] from the current iteration and use it as an argument to StateChange. See: jsfiddle.net/uBhWc/1 for an example.

rob Over a year ago

Yes you are right Yoshi. Alf, I think braces are matched, but as Yoshi says for it to work right you need to wrap things in another closure to prevent it using the value of i at the end of the loop.

Collectives™ on Stack Overflow

How to pass 'this' into a function using JavaScript

2 Answers 2

Option 1: You want `this` = element within `StateChange`

Option 2: You want `this` = `this` as of where you're setting up the handler

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option 1: You want this = element within StateChange

Option 2: You want this = this as of where you're setting up the handler

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Option 1: You want `this` = element within `StateChange`

Option 2: You want `this` = `this` as of where you're setting up the handler