CODEWITHSUNDEEP
javascripthtmldom-events
Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

onChange event not firing when triggered from inline JavaScript

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" />

Upvotes: 0

Views: 2420

Answers (2)

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34150

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.

Upvotes: 0

madox2
madox2

Reputation: 51841

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" />

Upvotes: 1

Related Questions