The first keyup event will change the value of one input but on the change of one input gn() in not calling.
This is my code
function fn() {
document.getElementById("one").value = "abc"
}
function gn() {
document.getElementById("two").value = "def"
}<input type="number" onkeyup="fn()">
<input type="number" id="one" onchange="gn()">
<input type="number" id="two">The first keyup event will change the value of one input but on the change of one input gn() in not calling.
This is my code
function fn() {
document.getElementById("one").value = "abc"
}
function gn() {
document.getElementById("two").value = "def"
}<input type="number" onkeyup="fn()">
<input type="number" id="one" onchange="gn()">
<input type="number" id="two">-
Setting an element's value (eg
element.value = 'something') does NOT trigger a change event. You can manually trigger the change event, or make sure to call any relevant functions after changing the value. – Sidney Commented Jan 25, 2018 at 21:24 - generally onchange is fired onblur event.. so assigning value by code will not fire the event.. so it has to be invoked from code.. function fn(){ document.getElementById("one").value = "abc"; document.getElementById("one").onchange() } – Immanuel Commented Jan 25, 2018 at 21:25
- Also, why are you trying to set numeric fields to string values? Did I miss a memo? – Snowmonkey Commented Jan 25, 2018 at 21:25
2 Answers
Reset to default 3The first assignment wasn't working because you were trying to set a "number" input to a non-numeric value.
The second assignment wasn't working because the onchange event isn't triggered when the value of a field is modified by script; you have to create and dispatch the event manually:
function fn() {
// This will work because the #one input is now type="text"
document.getElementById("one").value = "abc";
// now create and dispatch a change event on the field you modified:
var evt = new Event('change');
document.getElementById("one").dispatchEvent(evt)
// (Or, of course, just call gn() directly here.)
}
function gn() {
document.getElementById("two").value = "def"
}<input type="text" onkeyup="fn()">
<input type="text" id="one" onchange="gn()">
<input type="text" id="two">You're trying to set the value of a number input to a string, and not even one that can be cast to a number.
Replace your functions with:
document.getElementById("one").value = "123";
or
document.getElementById("one").value = 123;
and that will work.
If you want the input to be set to abc, you should switch the input type from number to text
<input type="text" id="one" onchange="gn()">
EDIT I copied my proposed solution of changing inputs into text into an HTML file. Below is the entirety of that file:
1 <html>
2
3 <input type="text" onkeyup="fn()">
4 <input type="text" id="one" onchange="gn()">
5 <input type="text" id="two">
6
7 <script>
8 function fn(){ document.getElementById("one").value = "abc"}
9 function gn(){ document.getElementById("two").value = "def"}
10 </script>
11 </html>
With this, a keyup event in the first box will change the 2nd input to abc. Changing the value (as in, entering in a value and clicking out of) the 2nd box will make the 3rd box have a value of def.