Assigning onChange Events in Javascript

Posted by blainegarrett

September 5, 2007

I wasted a small portion of the last few hours of work today with this issue and the docs everywhere were unclear. So I am going to explain really quick what happened in hopes that others don’t have to waste time with it either.

The correct code is:
var e = document.getElementById('some_element') e.onchange = some_func function some_func() { alert('Oh boy have I changed')}
That seems simple enough. However initially this seemed weird until I remembered some of the intricacies of Javascript.

Firstly, I know the event names are different between the HTML and their JS counterparts. onChange is used in the HTML for the element, but onchange is used in the Javascript. That isn’t a big deal, but a pain if you didn’t know.

Next, most everything in Javascript is an object including functions. Functions are just callable objects. You can run typeof(some_func) and get ‘function’ back (vs. object, string, etc). Since it is just an object, you can assign it to things and things to it. In the case above, we are assigning e.onchange (which is a function) to some_func. Both are callable. When the onchange even occurs, it just calls some_func().

Also, you can assign anonymous/lambda functions.
An anonymous function isn’t named in the scope of your code per se. We could have done something like this :

e.onchange = function() { alert('Oh boy have I changed')}

Neat huh? Basically all a function is is a chunk of code, an argument list, and an assignment reference.

So, what wasted my time was that I was trying to do :

e.onchange = 'alert(\'test\')'

This was evaluating to a string, which makes sense. However, when I didn’t have the quotes around the alert, I was getting the alert at assignment time and e.onchange was being assigned to the evaluation of the alert (null). Once I quit trying the simple tests and used my real code instead of the test alert everything worked fine. Basically End of Story.

However, it is worth noting that the following is close to being correct, but will also throw an error:

e.onchange = alert

Why? The onchange doesn’t take any arguments and alert does. Interesting huh? When e’s onChange event gets fired, we attempt to call alert.

There is one final thing to note on the way HTML makes use of all this. In a typical HTML element with an onChange we have something like :

<select id="myselect" onChange="if(this.selectedIndex == 0){alert('you picked the first one. Please pick soemthing else....')}"> ... </select>

Javascript actually creates and stores a lambda style function for the code that we wrote out inline. It looks something like this :

function() {if(this.selectedIndex == 0){ alert('you picked the first one. Please pick soemthing else....')} }

And since Javascript loads the whole HTML document into DOM, then really we have something like the following for the select box.

node.id = 'myselect'; node.onchange = function() {if(this.selectedIndex == 0){ alert('you picked the first one. Please pick soemthing else....')} }

So in the end where I was wasting my time was that I was trying to basically create an anonymous/lambda function and assigning it to the onchange, but I was merely creating a string to avoid it evaluation at assignment time. Silly me.

I hope this helps some people with their understanding of the ties between JS, HTML, and events. I knew this stuff a while ago and still managed to forget it when it came time to use it. Word.