Question

0

186

Views

Tengo un formulario con tres cuadros de entrada y quiero calcular matemáticas en vivo en javascript

Tengo un formulario con tres cuadros de entrada, lo que quiero hacer, ya que ingresaré números en esos cuadros de entrada, quiero ver el cálculo matemático en vivo en el área div

 function ABC() { const first = document.querySelector('.first') const second = document.querySelector('.second') const third = document.querySelector('.third') const total = document.querySelector('.math') const ab = first * second const cd = ab % third const ef = ab - cd total.innerHTML = ef }

 <form> <input class="first" type="text" value="" /> <input class="second" type="text" value="" /> <input class="third" type="text" value="" /> </form> <div class="math" onKeyUp="ABC()"> <div>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T13:50:03.311Z

Debe solucionar al menos dos problemas:

Para obtener los valores de las entradas, debe acceder a su propiedad de value
No hay ningún evento keyup que se active en un div , colóquelo en el elemento contenedor de los elementos de input , es decir, en el elemento de form .

 function ABC() { const first = document.querySelector('.first').value; const second = document.querySelector('.second').value; const third = document.querySelector('.third').value; const total = document.querySelector('.math') const ab = first * second const cd = ab % third const ef = ab - cd total.innerHTML = ef }

 <form onkeyup="ABC()"> <input class="first" type="text" value="" /> <input class="second" type="text" value="" /> <input class="third" type="text" value="" /> </form> <div class="math"> <div>

Mejor aún:

Adjunte un detector de eventos en código, no con un atributo HTML.
Escuche el evento de input , que también se activa cuando realiza cambios a través del menú contextual, arrastrando y soltando texto u otros métodos que no sean de teclado.
No use innerHTML cuando todo lo que quiere hacer es generar texto sin formato .
Termina tus declaraciones con punto y coma. Es un mal hábito dejar eso al algoritmo de inserción automática de punto y coma.
Dé a sus elementos de entrada un valor inicial y llame a la función ABC al cargar la página para que el cálculo ya funcione desde el principio.
Use type="number" para sus elementos de entrada.

 const form = document.querySelector("form"); form.addEventListener("input", ABC); function ABC() { const first = document.querySelector('.first').value; const second = document.querySelector('.second').value; const third = document.querySelector('.third').value; const total = document.querySelector('.math'); const ab = first * second; const cd = ab % third; const ef = ab - cd; total.textContent = ef; } ABC();

 <form> <input class="first" type="number" value="1"> <input class="second" type="number" value="1"> <input class="third" type="number" value="1"> </form> <div class="math"> <div>

0

186

Tengo un formulario con tres cuadros de entrada y quiero calcular matemáticas en vivo en javascript

1 answers

0

Find remote jobs

Andres GPT