Take the 2-minute tour ×

I have an input field I want to assign a new value and fire an .onchange() event. I did the following:


Where range is my input Id. I get the following error:

Uncaught TypeError: Cannot read property 'target' of undefined

Is there a way to define the 'target'? Thank you

share|improve this question
add comment

5 Answers

up vote 5 down vote accepted

The error about target is because there's code in the event handler that's trying to read the target property of the Event object associated with the change event. You could try passing in an faux-Event to fool it:

var range= document.getElementById('range');
range.onchange({target: range});

or, if you can, change the handler code to use this instead of event.target. Unless you are using delegation (catching change events on child object from a parent, something that is troublesome for change events because IE doesn't ‘bubble’ them), the target of the change event is always going to be the element the event handler was registered on, making event.target redundant.

If the event handler uses more properties of Event than just target you would need to fake more, or go for the ‘real’ browser interface to dispatching events. This will also be necessary if event listeners might be in use (addEventListener, or attachEvent in IE) as they won't be visible on the direct onchange property. This is browser-dependent (fireEvent for IE, dispatchEvent for standards) and not available on older or more obscure browsers.

share|improve this answer
add comment

Try using fireEvent or dispatcEvent (depending on browser) to raise the event:

if (document.getElementById("range").fireEvent) {
} else if (document.getElementById("range").dispatchEvent) {
    var clickevent=document.createEvent("MouseEvents");
    clickevent.initEvent("click", true, true);
share|improve this answer
I think fireEvent() is an IE-only thing. Standards-compliant browsers use dispatchEvent(). –  Pointy Oct 22 '10 at 12:18
I am getting an "Uncaught TypeError: Object #<an HTMLInputElement> has no method 'fireEvent'" error with this –  Mircea Oct 22 '10 at 12:18
@Pointy: you are right, I updated - thanks –  GôTô Oct 22 '10 at 12:27
Thanx, it works! –  Mircea Oct 22 '10 at 12:43
add comment

This seems to work for me (see this fiddle). Do you have any other code that may be the problem? How did you define your onchange handler?

Are you calling e.target in your onchange handler? I suspect this may be the issue... since you are doing the change programmatically, there is no corresponding window event.

share|improve this answer
add comment

from : http://www.mail-archive.com/jquery-en@googlegroups.com/msg44887.html

Sometimes it's needed to create an event programmatically. (Which is different from running an event function (triggering)

This can be done by the following fire code

> var el=document.getElementById("ID1")
> fire(el,'change')
>    function fire(evttype) {
>        if (document.createEvent) {
>          var evt = document.createEvent('HTMLEvents');
>          evt.initEvent( evttype, false, false);
>          el.dispatchEvent(evt);
>        } else if (document.createEventObject) {
>          el.fireEvent('on' + evttype);
>        }    } looks like this trick is not yet in jQuery, perhaps for a
> reason?
share|improve this answer
add comment

Generally, your code should work fine. There might be something else that's issuing the problem, though.

  • Where do you run those two lines?
  • Are you sure that the element with the range id is loaded by the time you run the code (e.g. you run it in document.ready).
  • Are you sure that you only have one element with id range on the page?
  • What is your onchange() function doing (could be helpful to post it here)?

Apart from that, I would recommend using jQuery (if possible):


or just



But as I mentioned, your case should work fine too: http://jehiah.cz/a/firing-javascript-events-properly

share|improve this answer
add comment

Your Answer


