Tengo tres entradas, a saber, field1, field2 y resultField. Adjunté detectores de eventos al primero de dos respectivamente y estoy obteniendo sus valores y restando el primero del segundo. Estoy asignando su resultado al campo de resultados que sirve como "entrada" para el campo de resultados. Luego adjunté un detector de eventos al campo de resultados, pero el problema es que el detector de eventos no se activará tan pronto como reciba la entrada evaluada del campo 1 y el campo 2. Encuentre mi código a continuación.
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>Los eventos no se activan si actualiza un valor de entrada con js (debe activarlo explícitamente)
Los eventos son enviados por el navegador cuando hay una acción del navegador (cargar, en línea...) o una acción del usuario (clic, tecla arriba...) pero no cuando haces myfield.value=
debe activar explícitamente el evento después de actualizar el valor del campo con
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>