i want to make show//hide password but its not working

Question

hello I want to show/hide the password but after clicking 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");
  }
});

<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 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

score 1 · Accepted Answer · answered Nov 10 '22 at 03:39

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>

i want to make show//hide password but its not working

1 Answers1