小编use*_*428的帖子

我想在仅使用Javascript点击眼睛图标时创建密码切换功能.我已经为它编写了代码,但它只用于显示密码文本,而不是相反.有人可以在下面的代码中看到逻辑错误.

HTML代码:

function show() {
  var p = document.getElementById('pwd');
  p.setAttribute('type', 'text');
}

function hide() {
  var p = document.getElementById('pwd');
  p.setAttribute('type', 'password');
}

function showHide() {
  var pwShown = 0;

  document.getElementById("eye").addEventListener("click", function() {
    if (pwShown == 0) {
      pwShown = 1;
      show();
    } else {
      pwShow = 0;
      hide();
    }
  }, false);
}

Javascript代码:

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" onclick="showHide()" id="eye">
  <img src="eye.png" alt="eye"/>
</button>

我想仅使用 JavaScript 创建一个单击按钮时的滑出菜单。我知道存在许多解决方案，但它们都使用 jQuery。我想专门使用 Javascript 对其进行编码。有人可以帮我吗？

超文本标记语言

<li class="menu"><a href="#about" id="mainmenu">Menu<span class="box-shadow-menu"></span></a>
    <ul class="sub" id="sub">
        <li><a href="#">Dashboard></a></li>
        <li><a href="#">My Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</li>

CSS

#sub
{
    color: #FFF;
    background-color: #662D91;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    border-left: 1px solid #000;
    height: 100%;
    width: 238px;
    padding: 15px 25px;
    margin: 0;
    z-index: 20;
}
#sub a
{
    display: block;
    font-size: 1.1em;
    color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid rgba( 255, 255, 255, …