我想顯示//隱藏密碼，但它不起作用-有解無憂

你好我想顯示/隱藏密碼但是點擊它后它不起作用，物件不想隱藏密碼，誰能幫助我，錯誤的代碼在哪里我想顯示//隱藏密碼，但它不起作用

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

我希望在用戶輸入密碼時出現眼睛圖示，當我想查看密碼時，眼睛圖示可以顯示密碼

uj5u.com熱心網友回復：

const Password = document.getElementsByClassName("teks")

回傳array 您需要指定它的索引，以便您eventlistener可以找到它。或最好添加id和使用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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530740.html

標籤：javascripthtmlcss

上一篇：如何將JS功能添加到側邊選單？

下一篇：為什么，當我從@property值切換到var值時，我的CSS影片行為不正常？