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)">

Answer 1

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:

1. Inside the StateChange function call, you want this to refer to the element that changed.
2. 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.)

More reading:

• Mythical methods
• You must remember this