在输入密码框中眼睛睁开可以看见数字，眼睛闭上看不见数字怎么用JS实现

无论做那个项目，登录注册页面总是避免不了的，那怎么用js来控制密码的显示和隐藏呢？先看一下效果图：

HTML代码如下：

<div>
         <label for="password">
               <input type="password" id="password" placeholder="请输入密码" maxlength="12" value="" autocomplete="off">
              <span class="login__pwdnotShow___3kxE7" id="lyypd"></span>
         </label>
 </div>

JS代码如下：

<script type="text/javascript">
           window.onload=function(){
               var input=document.getElementById("password")
               var eyes=document.getElementById("lyypd")
                 eyes.onclick=function(e){
                     var btn=e.target.className    //e.target是找到了鼠标点击事件的DOM元素
                     if(btn === 'login__pwdnotShow___3kxE7'){
                         input.type="text"
                         e.target.className="login__pwdShow___3dPhS"
                     }
                     else if(btn === 'login__pwdShow___3dPhS'){
                         input.type="password"
                         e.target.className="login__pwdnotShow___3kxE7"
                     }
                 }
           }
  </script>

解释：代码放置在window.onload的事件处理函数中，只有当文档加载完成后，才会执行事件处理函数，如果js放在div上面，则需放在window.onload的事件处理函数中才能显示效果