Can anyone help me figure out why my show/hide password functionality isn't working properly? I've tried to toggle the visibility of the password using an eye icon, but it's not hiding the password correctly.
const Password = document.getElementsByClassName("teks");
const eye = document.getElementById("eye");
eye.addEventListener("click", function () {
if (Password.type === "password") {
Password.type = "text";
eye.classList.add("hide");
} else {
Password.type = "password";
eye.classList.remove("hide");
}
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div id="login-form">
<h3>Login</h3>
<ul class="login-list">
<i class="fa fa-times" aria-hidden="true" id="cancel"></i>
<input class="teks1" type="text" placeholder="Username" />
<input class="teks" type="password" placeholder="Password" />
<span class="mata">
<i class="fa fa-eye" id="eye"></i>
</span>
<p><a href="">Lupa password?</a><br /></p>
<input type="button" value="Login" class="tombol" />
</ul>
</div>I am looking to create an eye icon that toggles between displaying and hiding the password for a user-friendly login experience. Let's debug this together!