Cuando hago clic en el ícono para cambiar entre un ojo y un ojo con una barra, no responde inmediatamente, sino que después de dos clics y luego de otro clic, el ícono desaparece. No entiendo por qué está haciendo esto, así que cualquier ayuda es bienvenida.
const pass = document.getElementById("pass"); const togglePassword = document.getElementById("togglePass"); togglePassword.addEventListener("click", function Toggle() { if (pass.type === "password") { pass.type = "text"; togglePassword.classList.toggle("fa-eye"); } else { pass.type = "password"; togglePassword.classList.toggle("fa-eye-slash"); } }); .form-control i { position: absolute; top: 40px; right: 10px; visibility: hidden; } .form-control i#togglePass { margin-left: -30px; cursor: pointer; visibility: visible; } <html lang="en"> <head> <link rel="stylesheet" href="css/styles.css"> <script src="https://kit.fontawesome.com/c90e5c3147.js" crossorigin="anonymous"></script>- <title>Create an Account</title> </head> <body> <div class="container"> <div class="header"> <h2>Create Account</h2> </div> <form class="form" action="register.php" method="POST" id="form" name="form"> <div class="form-control"> <label>Password</label> <input type="password" placeholder="Please enter a password" id="pass" name="pass"> <i class="fa-solid fa-eye-slash" id="togglePass"></i> <small>Message</small> </div> </form> </div> <script src="js/script.js"></script> </body> </html>El problema es que está alternando dos clases de iconos CSS diferentes condicionalmente. Te sugiero que empieces con un icono, para entender lo que está pasando...
Sin embargo, aquí está su solución temporal:
if (pass.type === "password") { pass.type = "text"; togglePassword.classList.remove("fa-eye-slash"); togglePassword.classList.add("fa-eye"); } else { pass.type = "password"; togglePassword.classList.remove("fa-eye"); togglePassword.classList.add("fa-eye-slash"); }(En lugar de alternar en la clase, primero elimine los no deseados y luego agregue el otro)