Can'；无法使用Javascript切换图标/输入类型

我在胡思乱想，想弄清楚我做错了什么。我希望用户能够点击眼睛图标，让他们的密码显示为纯文本-但它只能部分工作

init = {
    visible : function() {
        var visible = false;
        if (!visible) {
            visible = true;
            document.querySelector('#exampleInputPassword1').type = 'text';
            document.querySelector('.input-glyph-eye').className = 'input-glyph-eye glyphicon glyphicon-eye-open';
        } else {
            visible = false;
            document.querySelector('#exampleInputPassword1').type = 'password';
            document.querySelector('.input-glyph-eye').className = 'input-glyph-eye glyphicon glyphicon-eye-close';
        }
    }
};

我将所有内容都放在一个JSFIDLE中：-您将看到眼睛图标将更改一次，但密码根本不会更改。当你点击它时，它应该可以在睁眼和闭眼之间自由切换，并且type=text和type=password

有人知道发生了什么事吗？

---

另外，我已经加载了jQuery，因为Bootstrap需要它，但我不想在我自己的代码中使用它。

所以这里有几个问题

首先，您需要将

var visible

声明移出函数，因为每次函数运行时它都会被重新声明为false

第二，Authenticate和Sign-Up选项卡的输入具有相同的

id

，这是无效的HTML，并且会抛出JS

这适用于“注册”选项卡：

var visible = false;
init = {
      visible: function() {
          if (!visible) {
              visible = true;
              document.querySelector('#exampleInputPassword2').type = 'text';
              document.querySelector('.input-glyph-eye').className = 'input-glyph-eye glyphicon glyphicon-eye-open';
          } else {
              visible = false;
              document.querySelector('#exampleInputPassword2').type = 'password';
              document.querySelector('.input-glyph-eye').className = 'input-glyph-eye glyphicon glyphicon-eye-close';
          }
      }
  };