0
133
VistasCómo responder inmediatamente a un cambio en un elemento de entrada de número en Javascript
Soy un principiante en HTML/CCS/Javascript y estoy diseñando un sitio web que se ve así:
Me gustaría asegurarme de que la tabla que se muestra a continuación esté siempre sincronizada con el elemento de entrada de número.
Tengo un elemento de número de entrada como este:
<label for="loansize">Loan Size (USD) (between 500 and 3000):</label> <input type="number" id="loansize" name="loansize" value="3000" min="500" max="3000">Actualmente, la tabla se actualiza cuando el usuario hace clic en otra parte de la página, porque agregué un código como este:
'<div onChange="processPage();">' ... Render the HTML ... '</div>';Pero esto no detecta al usuario en el proceso de cambiar el número de entrada, por lo que me encuentro en una situación como esta:
La tabla inferior permanece sin cambios con respecto a la imagen de arriba, aunque la entrada de números ha cambiado. Se necesita un clic en otra parte de la página para que la tabla vuelva a estar sincronizada.
¿Cómo puedo asegurarme de que la tabla se vuelve a representar (es decir, permanece sincronizada) en tal situación?
2 Respuestas
Responde la pregunta0
En lugar de usar onChange en línea, que se considera una mala práctica . Puede modificar el elemento usando DOM . Esta es la forma sencilla de activar la función processPage() cada vez que se cambia el valor en la entrada del préstamo.
const loanSize = document.getElementById('loansize'); loanSize.addEventListener('input', processPage);https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
0
Puede intentar usar el oyente onInput .
Desde MDN :
El evento de entrada se activa cada vez que cambia el valor del elemento. Esto es diferente al evento de cambio, que solo se activa cuando se confirma el valor, como al presionar la tecla Intro, seleccionar un valor de una lista de opciones y similares.