Javascript manually shooting .onchange () event

Question

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

document.getElementById("range").value='500';
document.getElementById("range").onchange();

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 a “goal”? Thanks you

Answer 1

The error targetis that code appears in the event handler trying to read the property of the targetobject Eventassociated with the change event. You can try switching to faux-Event to trick it:

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

, , , this event.target. ( , -, , IE " " ), , , event.target .

Event, target, " " . , (addEventListener attachEvent IE), onchange. (fireEvent IE, dispatchEvent ) .

Answer 2

fireEvent dispatchEvent ( ), :

document.getElementById("range").value='500';
if (document.getElementById("range").fireEvent) {
    document.getElementById("range").fireEvent("onclick");
} else if (document.getElementById("range").dispatchEvent) {
    var clickevent=document.createEvent("MouseEvents");
    clickevent.initEvent("click", true, true);
    document.getElementById("range").dispatchEvent(clickevent);
}

Answer 3

from: http://www.mail-archive.com/[e-mail]/msg44887.html

. ( ()

> 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?

Answer 4

, . , - , .

• ?
• , range id , (, document.ready).
• , range ?
• onchange() ( )?

, jQuery ( ):

$('#range').trigger('change');

$('#range').change();

http://api.jquery.com/change/

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

Answer 5

This works for me (see fiddle ). Do you have other code that might be the problem? How did you define your onchange handler?

Are you calling e.target in your onchange handler? I suspect this may be a problem ... since you are making changes programmatically, there is no corresponding window event.