I have three inputs namely, field1, field2, and resultField. I have attached event listeners to the first of two respectively and am getting their values and subtracting the first one from the second one. I am assigning their result to the result field which serves as an "input" for the result Field. I have then attached an event Listener to the result Field but the problem is the event listener won't fire as soon as it receives the evaluated input from field1 and field2. Please find my code below.
let field1 = document.getElementById("field1");
let field2 = document.getElementById("field2");
let resultField = document.getElementById("fieldResult");
let value1 = field1.value;
let value2 = field2.value;
field1.addEventListener("input", result);
field2.addEventListener("input", result);
resultField.addEventListener("input", alertFunc);
function result() {
value1 = field1.value;
value2 = field2.value;
let resultValue = value1 - value2;
resultField.value = resultValue;
}
function alertFunc() {
alert("We have an input in result Field.");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<label for="field1">Filed 1</label>
<input type "number" id="field1"></input>
<label for="field2">Filed 2</label>
<input type "number" id="field2"></input>
<label for="fieldResult">Result Filed</label>
<input type "number" id="fieldResult" readonly></input>
</body>
</html>Event are not fired if you update an input value with js (you have to explicitly fired it)
Event are send by browser when there is browser action (load, online...) or user action (click, keyup...) but not when you do myfield.value=
you have to explicitly fire the event after you update the field value with
resultField.dispatchEvent(new Event('input'));
let field1 = document.getElementById("field1");
let field2 = document.getElementById("field2");
let resultField = document.getElementById("fieldResult");
let value1 = field1.value;
let value2 = field2.value;
field1.addEventListener("input", result);
field2.addEventListener("input", result);
resultField.addEventListener("input", alertFunc);
function result() {
value1 = field1.value;
value2 = field2.value;
let resultValue = value1 - value2;
resultField.value = resultValue;
resultField.dispatchEvent(new Event('input'));
}
function alertFunc() {
alert("We have an input in result Field.");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<label for="field1">Filed 1</label>
<input type "number" id="field1"></input>
<label for="field2">Filed 2</label>
<input type "number" id="field2"></input>
<label for="fieldResult">Result Filed</label>
<input type "number" id="fieldResult" readonly></input>
</body>
</html>