onChange event not firing when triggered from inline JavaScript

Question

Notice that + button changes value of input, and input not triggering change, input events as expected. But input itself triggers events when changed

Is that intended behavior or i'm doing something totally wrong? Also i would like to note, I would like to see pure JavaScript solution.

Sample demo below:

var input = document.querySelector('#number')
input.onchange = function(event){
  alert('change');
}
input.oninput = function(event){
  alert('change');
}

<button onclick="number.value++">+</button>
<input type="number" id="number" value="0" />

Can't understand what you saying?

divy3993
– divy3993

2016-02-14 10:14:19 +00:00
Commented Feb 14, 2016 at 10:14 — divy3993
– divy3993, Commented Feb 14, 2016 at 10:14

Medet Tleukabiluly · Accepted Answer · 2016-02-14 10:27:57Z

1

You can dispatch change event from javascript like this:

<button onclick="number.value++;number.dispatchEvent(new Event('change'))">+</button>

Demo

var input = document.querySelector('#number')
input.onchange = function(event){
  alert('change');
}
input.oninput = function(event){
  alert('change');
}

<button onclick="number.value++;number.dispatchEvent(new Event('change'))">+</button>
<input type="number" id="number" value="0" />

edited Feb 14, 2016 at 10:27

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

answered Feb 14, 2016 at 10:20

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr Lister · Accepted Answer · 2016-02-21 08:31:10Z

For inputs onchange occurs when focus is lost and not actually when the content is changed, but oninput fires immediately after change is made. and oninput doesn't fire when content is changed via other controls.

so no event will fire when pushing the button as the content is changed via other control and without input and no blur is triggered.

check this link: http://www.w3schools.com/tags/ev_oninput.asp

Definition and Usage The oninput attribute fires when an element gets user input.

The oninput attribute fires when the value of an <input> or <textarea> element is changed.

Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <keygen> and <select> elements.

Collectives™ on Stack Overflow

onChange event not firing when triggered from inline JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related