Estoy tratando de habilitar el botón de inicio de sesión y cambiar el color a un azul más oscuro cuando hay al menos una entrada para la identificación y la contraseña. (Aún no he implementado la parte de habilitación). Sin embargo, el código anterior no parece funcionar. ¿Alguien podría ayudar? ¡Gracias!
const button = document.getElementById('button'); const idbar = document.getElementsByClassName('id-bar')[0]; const pwbar = document.getElementsByClassName('password-bar')[0]; const bar = document.getElementById('input') bar.addEventListener("keyup", () =>{ const id = idbar.value; const pw = pwbar.value; if (id.length > 0 && pw.length > 0) { button.style.backgroundColor = "#0095F6" } else { button.style.backgroundColor = "#C0DFFD" } }); <head> <script src="js/login.js"></script> </head> <body> <div class = wrapper> <input id = "input" class = "id-bar" type = "text" placeholder = "email"> <input id = "input" class = "password-bar" type = "password" placeholder = "password"> <button id = "button">login</button> </div> </body>la identificación debe ser única...
si no usa id
const button = document.getElementById('button'); const idbar = document.getElementsByClassName('id-bar')[0]; const pwbar = document.getElementsByClassName('password-bar')[0]; const bar = document.getElementsByTagName("input"); [...bar].forEach(bar => { bar.addEventListener("keyup", () =>{ const id = idbar.value; const pw = pwbar.value; if (id.length > 0 && pw.length > 0) { button.style.backgroundColor = "#0095F6" } else { button.style.backgroundColor = "#C0DFFD" } }); }) <head> <script src="js/login.js"></script> </head> <body> <div class = wrapper> <input id = "input" class = "id-bar" type = "text" placeholder = "email"> <input id = "input" class = "password-bar" type = "password" placeholder = "password"> <button id = "button">login</button> </div> </body>Entonces, el problema con su código es que está usando id para apuntar a dos elementos que no es posible y muchos lo han respondido, pero tengo una sugerencia diferente que es CSS.
.submit { background-color: #c0dffd; } .email-input:valid + .password-input:valid + .submit { background-color: #0095f6; } <input type="text" class="email-input" required /> <input type="password" class="password-input" required /> <button class="submit">Submit</button>¡Incluso puede verificar si el correo electrónico es válido o no simplemente agregando type="email" en la entrada de correo electrónico!
Sus identificaciones/clases están por todas partes, y como menciona @dangerousmanleesanghyeon, no se ajustan al uso adecuado. Podría valer la pena leer brevemente sobre cómo usarlos correctamente, a través de MDN: selectores CSS .
De todos modos, refactoricé un poco su código y reemplacé getElementBy s con querySelectors más versátiles, que es un excelente método para usar y podría ahorrarle algunos dolores de cabeza futuros a lo largo de su viaje de codificación.
Solo una nota: querySelectorAll (usado para obtener ambas bars ) devuelve una NodeList , que tuve que convertir en un Array para poder usar map . Esto puede parecer un poco complejo en este momento, ¡pero estos son conceptos útiles para familiarizarse!
const button = document.querySelector('#button') const idbar = document.querySelector('#idInput') const pwbar = document.querySelector('#passwordInput') const bars = document.querySelectorAll('.input') Array.from(bars).map(bar => bar.addEventListener("keyup", () => { const id = idbar.value const pw = pwbar.value if (id.length > 0 && pw.length > 0) { button.style.backgroundColor = "#0095F6" } else { button.style.backgroundColor = "#C0DFFD" } })) <head> <script src="js/login.js"></script> </head> <body> <div class=wrapper> <input id="idInput" class="input" type="text" placeholder="email"> <input id="passwordInput" class="input" type="password" placeholder="password"> <button id="button">login</button> </div> </body>