• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

158
Vistas
Verifique si todos los campos de entrada están completos, luego llame a la función js

Tengo una calculadora de apuestas deportivas, esta tiene varios campos de entrada, tan pronto como se completen todos los campos, la tabla calculada debería mostrarse a continuación.

Cuando se muestra la tabla, debería ser posible cambiar los campos de entrada; la tabla también debería cambiar en tiempo real.

HTML: <input type="number" class ="form-control input-lg" id="quoteBack">

JS: document.getElementById("quoteBack").addEventListener("input", function() {});

Actualmente estoy usando la variante de "entrada" addEventListener, esto solo se puede usar en un campo.

Pero quiero verificar que todos los campos estén llenos, luego debería aparecer la tabla

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Hmm, primero que nada, creo que deberías darle al campo de entrada un nombre de className único, luego solo revisaremos los campos que tienen ese nombre de className .

Por ejemplo:

 <input type="number" class ="form-control input-lg validated-field" id="quoteBack">

Le di un nombre validated-field .

Luego, verifiquemos esos campos usando JavaScript:

 // Get fields by className var fields = document.getElementsByClassName("validated-field") // Array.from will convert the HTMLCollection to Native Array. if (Array.from(fields).length > 0) { // Loop Array.from(fields).forEach(field => { // Add Event for each field. field.addEventListener("input", function(e) { console.log(e.target.value) if (!e.target.value) { e.target.classList.add("not-valid") } else { e.target.classList.remove("not-valid") } }) }) }

Simplemente recorro los campos y agrego un detector de eventos para cada campo.

Ejemplo en vivo: https://codepen.io/nawafscript/pen/OJjEXrW

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda