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
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