Issue
hello i want to show/hide the password but after clicking it it doesn't work, the object doesn't want to hide the password, can anyone help me, where is the wrong code
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");
}
});
<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 want the eye icon when the user enters the password to appear and when I want to see the password the eye icon works to display the password
Solution
const Password = document.getElementsByClassName("teks")
returns array
you need to specify it's index so your eventlistener
can locate it. or best add id
and use getElementById
const Password = document.getElementsByClassName("teks")[0];
const Password = document.getElementsByClassName("teks")[0];
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>
Answered By - Stacks Queue
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.