javascript - 仅使用 Javascript 在单击按钮时显示/隐藏密码

Question

我只想使用 Javascript 在单击眼睛图标时创建密码切换功能。我已经为它编写了代码，但它只能显示密码文本，而不是相反。谁能看出下面代码中的逻辑错误。

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);
}

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

Answer 1

每次单击按钮时，您都在绑定(bind)单击事件。您不需要多个事件处理程序。此外，您在每次点击时都重新定义了 var pwShown = 0，因此您永远无法恢复输入状态(pwShown 保持不变)。

删除onclick 属性并用addEventListener 绑定(bind)点击事件:

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

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

var pwShown = 0;

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

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>