I have an input field I want to assign a new value and fire an .onchange() event. I did 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 the 'target'? Thank you
document. querySelector('#test'). addEventListener('change', () => console.
Use the dispatchEvent Method querySelector('input'); element. addEventListener('change', () => console. log('change')) const event = new Event('change'); element. dispatchEvent(event);
Like an Apex trigger for Salesforce objects, you define a change event trigger on the change event corresponding to the Salesforce object. Only after insert triggers are supported. Define a change event trigger with the after insert keyword on the change event using this format.
Try using fireEvent or dispatchEvent (depending on browser) to raise the event:
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);
}
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.
from : http://www.mail-archive.com/[email protected]/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?
Generally, your code should work fine. There might be something else that's issuing the problem, though.
range
id is loaded by the time you
run the code (e.g. you run it in
document.ready).range
on the page?onchange()
function doing (could be
helpful to post it here)?Apart from that, I would recommend using jQuery (if possible):
$('#range').trigger('change');
or just
$('#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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With