Estoy creando un sitio para facilitar los cálculos de los juegos de mesa. Entonces, si simplifica, tengo un formulario como este:
<input id="x"/> <input id="y"/>Y quiero recopilar datos de este formulario en tiempo real y procesarlos así de inmediato:
<span id="x-plus-y"/> en html y document.getElementById('x-plus-y').innerHTML = x*y en js
Es muy simplificado, pero creo que entendiste.
Mi pregunta es cómo procesar x+y inmediatamente cuando el usuario ingresa los valores en los campos de entrada.
Este es el enfoque simple que puede seguir. Adjunté un detector de eventos keyup en cada entrada y luego invoqué la función updateResult que calcula el producto y lo muestra dentro del resultado div.
HTML
Number 1 : <input type="number"> <br><br> Number 2 : <input type="number"> <br><br> <div id="result"> </div>JS
const inputs = Array.from(document.querySelectorAll("input")); const resultDiv = document.querySelector("div"); const numbers = []; for(const input of inputs) { input.addEventListener('keyup', updateResult); } function updateResult() { let product = 1; for(const input of inputs) { product*= parseInt(input.value,10); } if(!isNaN(product)) { resultDiv.innerHTML = "Product: " + product; } }