He estado tratando de trabajar en este código, pero no puedo encontrar los errores (y supongo que hay muchos de ellos) que estoy cometiendo. Hasta ahora lo probé usando querySelector y getElementById y he estado reescribiendo las funciones varias veces, pero hasta ahora no he tenido suerte. ¿Algún consejo? Gracias por adelantado.
const btnNext = document.querySelector(".btn-next"); const logIn = document.querySelector(".btn-login"); const inputMail = document.querySelector(".input-mail"); const inputPassword = document.querySelector(".input-password"); function btnLogIn() { if (inputMail.value.length && inputPassword.value.length == 0) { btnNext.disabled == true; } else { btnNext.disabled == false; } } function changeColor() { if (document.getElementById("input-mail") !== "") { document.getElementById("btn-next").style.background = "gray"; } else { document.getElementById("btn-next").style.background = "blue"; } } body{ margin: auto; width:50%; padding: 0; background-color: #eeeeee; } form{ display: flex; flex-direction: column; } .btn-next{ margin-top: .5rem; background-color: #949aa6; color: white; border: none; border-radius: 2px; padding: 18px 119px 18px 119px; font-size: .8rem; font-weight: 600; } input{ width: 16.5rem; height: 2rem; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } <body> <form> <p>Email</p> <input type="email" placeholder="Email" class="input-mail" id="input-mail" onkeyup="changeColor()"> <p>Password</p> <input type="password" placeholder="Password" class="input-password" id="input-password"><br> </form> <button class="btn-next" id="btn-next">NEXT</button> </body>Cambia lo siguiente a
function btnLogIn() { if (inputMail.value.length && inputPassword.value.length == 0) { btnNext.disabled = true; } else { btnNext.disabled = false; } }se corrigieron los signos '=' para cambiar la línea de comparación a asignación.
const btnNext = document.querySelector(".btn-next"); const logIn = document.querySelector(".btn-login"); const inputMail = document.querySelector(".input-mail"); const inputPassword = document.querySelector(".input-password"); inputMail.addEventListener("input", verifyInput); inputPassword.addEventListener("input", verifyInput); function verifyInput() { if ( inputMail.value.trim().length == 0 || inputPassword.value.length == 0 ) { btnNext.disabled = true; btnNext.style.backgroundColor = "gray"; } else { btnNext.disabled = false; btnNext.style.backgroundColor = "blue"; } } body{ margin: auto; width:50%; padding: 0; background-color: #eeeeee; } form{ display: flex; flex-direction: column; } .btn-next{ margin-top: .5rem; background-color: #949aa6; color: white; border: none; border-radius: 2px; padding: 18px 119px 18px 119px; font-size: .8rem; font-weight: 600; } input{ width: 16.5rem; height: 2rem; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } <body> <form> <p>Email</p> <input type="email" placeholder="Email" class="input-mail" id="input-mail"> <p>Password</p> <input type="password" placeholder="Password" class="input-password" id="input-password"><br> </form> <button class="btn-next" id="btn-next" disabled>NEXT</button> </body>