Soy nuevo en JavaScript. Como resultado, estaba practicando algunos códigos que leen dos números de un formulario y muestran el resultado al hacer clic en un botón. También quiero agregar un botón de reinicio para comenzar un nuevo cálculo. El problema es que el campo de resultados no se actualiza al hacer clic en el botón, pero el botón de reinicio funciona. A continuación se muestra mi código:
const btn = document.getElementById('btn'); const calc = document.getElementById('calc'); function add() { const num1 = parseInt(document.getElementById('num1').value); const num2 = parseInt(document.getElementById('num2').value); const result = document.getElementById('result'); if (num1 && num2 !== NaN) { calc.addEventListener('click', () => { let sum = num1 + num2; result.value = sum; return false; }); } else { alert("Enter Valid Number"); } } btn.addEventListener('click', () => { num1.value = " "; num2.value = " "; result.value = " "; }); <form id="adder" onsubmit="return add();"> <input type="text" name="num1" id='num1' placeholder="enter number"> <input type="text" name="num2" id='num2' placeholder="enter number"> <button id="calc" type="button">Add</button> <input type="text" name="num3" id="result" readonly placeholder="Result"> <button type="button" id="btn">Clear</button> </form>Debe crear addEventListener del botón calc fuera de add(); y llame a add(); en event ;
const btn = document.getElementById('btn'); const calc = document.getElementById('calc'); function add() { const num1 = parseInt(document.getElementById('num1').value); const num2 = parseInt(document.getElementById('num2').value); const result = document.getElementById('result'); if (num1 && num2 !== NaN) { let sum = num1 + num2; result.value = sum; return false; } else { alert("Enter Valid Number"); } } calc.addEventListener('click', () => { add(); }); btn.addEventListener('click', () => { num1.value = " "; num2.value = " "; result.value = " "; }); <form id="adder" onsubmit="return add();"> <input type="text" name="num1" id='num1' placeholder="enter number"> <input type="text" name="num2" id='num2' placeholder="enter number"> <button id="calc" type="button">Add</button> <input type="text" name="num3" id="result" readonly placeholder="Result"> <button type="button" id="btn">Clear</button> </form> onsubmit no se activa porque no agregó un botón de envío; de todos modos, ese método no funciona porque agrega un eventListener que funcionará después de presionar enviar.