onchange event not fire when the change come from another function

Question

I have an input text that get his value from a Javascript function (a timer with countdown).

I want to raise an event when the input text is 0 ,so I am using the change eventListener.

Unfortunately it doesn't seem to raise the event when the change is coming from javascript function.

How can I force the change event to work, even if the change is coming from Javascript and not from the user?

Medico

Answer 1

From the fine manual:

change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

When you modify the text input's value through code, the change event will not be fired because there is no focus change. You can trigger the event yourself though with createEvent and dispatchEvent, for example:

el = document.getElementById('x');
ev = document.createEvent('Event');
ev.initEvent('change', true, false);
el.dispatchEvent(ev);

And a live version: http://jsfiddle.net/ambiguous/nH8CH/

Bywoods

This won't work if you use any modern event listening method; it will only work if you use the old onchange property. You should use the DOM events API to fire events. – Oligarchy

@Delan: Can you tell that I haven't done raw JavaScript for a long time? I'll patch it up. – Bywoods

Answer 2

it's 2018 now and seems that initEvent() is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

i think you can trigger the event in a one-liner now: element.dispatchEvent(new Event('change'));

Sounder

Answer 3

In the function that changes the value, manually fire a change event.

var e = document.createEvent('HTMLEvents');
e.initEvent('change', false, false);
some_input_element.dispatchEvent(e);

Oligarchy

Does it need to be HTMLEvents? The jQuery version apparently uses Event and the only difference I can see is DOM level 2 versus level 3. – Bywoods

As far as I know, HTMLEvents, Event and Events are synonymous. – Oligarchy

Event seems to be the official one, Events is probably around in some browsers to match the hasFeature pluralization. – Bywoods

Answer 4

A more reusable option :

function simulate_event(eventName, element) {
    // You could set this into the prototype as a method.
    var event;

    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventName, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = eventName;
    };

    event.eventName = eventName;

    if (document.createEvent) {
        element.dispatchEvent(event);
    } else {
        element.fireEvent("on" + event.eventName, event);
    }
};

Ignazio

Answer 5

Simply redefine the "value" property of the node, using getAttribute("value") and setAttribute("value", newValue), in the getters and setters, as well as dispatch the "change" event at the end of the setter. For example:

myNode.onchange = e => console.log("Changed!", e.target.value);

Object.defineProperty(myNode, "value", {
  get: () => myNode.getAttribute("value"),
  set(newValue) {
    myNode.setAttribute("value", newValue);
    myNode.dispatchEvent(new Event("change")); //or define the event earlier, not sure how much of a performance difference it makes though
  }
})

var i = 0;
setTimeout(function changeIt() {
    if(i++ < 10) {
        myNode.value = i;
        setTimeout(changeIt, 1000);
    }
}, 1)

<input id="myNode">

Corneliuscornell

Answer 6

Instead of using change, you can use keypress event instead.

This is because the change event is not meant to fire until it is not focused anymore - when you click out of the input tag.

Madaih