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

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

函数显示（）{
var p=document.getElementById（'pwd'）；
p、 setAttribute（'type'，'text'）；
}
函数hide（）{
var p=document.getElementById（'pwd'）；
p、 setAttribute（'type'，'password'）；
}
函数showHide（）{
var=0；
document.getElementById（“眼睛”）.addEventListener（“单击”，函数）（）{
如果（显示的pw==0）{
pw=1；
show（）；
}否则{
pwShow=0；
隐藏（）；
}
}，假）；
}

---

根据您编写的内容，您正在以html和javascript（在

showHide

函数中）添加事件。可能您可以将js代码从现有更改为：

function showHide()
{
  var input = document.getElementById("pwd");
  if (input.getAttribute("type") === "password") {
    show();
  } else {
    hide();
  }
}

---

每次单击按钮时都会绑定单击事件。您不需要多个事件处理程序。另外，每次单击都会重新定义

var pwshowed=0

，这样就永远无法恢复输入状态（

pwshowed

保持不变）

删除onclick属性并将单击事件绑定到：

函数显示（）{
var p=document.getElementById（'pwd'）；
p、 setAttribute（'type'，'text'）；
}
函数hide（）{
var p=document.getElementById（'pwd'）；
p、 setAttribute（'type'，'password'）；
}
var=0；
document.getElementById（“eye”）.addEventListener（“单击”），函数（）{
如果（显示的pw==0）{
pw=1；
show（）；
}否则{
pw=0；
隐藏（）；
}
}，假）
您不需要维护一个额外的“PWSHOWED”变量来决定是显示文本还是隐藏文本。您只需检查“pwd”元素的“type”属性，如下所示：


JavaScript:

document.getElementById("eye").addEventListener("click", function(e){
        var pwd = document.getElementById("pwd");
        if(pwd.getAttribute("type")=="password"){
            pwd.setAttribute("type","text");
        } else {
            pwd.setAttribute("type","password");
        }
    });

HTML:

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

在代码中，每次调用showHide（）函数时，pWShowed变量都设置为0

您需要将PWSHOWED变量声明为全局变量

var pwShown = 0;
function showHide()
{
 ...
}

最简单的方法是使用带有
onclick
属性的按钮来切换输入类型



切换
Javascript代码的else部分中的变量“pwShow”拼写错误（称为“pwShow”）。因此，PWSHOWED永远不会重置为0。
这是对Tunaki答案的改进。我们甚至不想检查表单字段已经处于哪个状态，因为这完全取决于鼠标的状态。这只允许暂时查看密码（只要将鼠标按钮按住在按钮上方）


可见密码测试
密码：
偷看密码
转储眼睛图像，并根据其状态使用显示“显示”或“隐藏”的按钮。
然后你只需点击按钮的文本。
您可以将按钮样式化为无边框，并且最初具有与其周围相同的背景。通过设置高亮显示按钮。显示：悬停可使按钮背景变亮，或使显示/隐藏文本的颜色变亮。
通过将输入和按钮放在同一个范围内，您将使它们都内联（CSS-span{display:inline block；}）并在同一底部垂直对齐

在空白范围下方使用普通文本输入显示验证错误警报。确保其选项卡索引为-1，并且其背景颜色和边框与其周围相同

  .
  .
  .

  <span class="pwSpan">
    <input type="password" placeholder="Password" id="pwd"  class="masked"  name="password" onblur="return checkPassword();"/>
    <button type="button" class="show" id="show" value="Show" onclick="showHide()" tabIndex="-1" autocomplete="off" >
    </button>
  </span>
  <input type="text" class="error" name="pwErr" value="" tabIndex="-1" />
  .
  .
  .

function showHide()
{
   const pwField = document.getElementById("pwd");
   const showHideValue = document.getElementById("show").value;

   if(showHideValue.trim() === "Show")
   {
      showHideValue = "Hide";
      pwField.setAttribute('type', 'text');
   }
   else 
   {
      showHideValue = "Show";
      pwField.setAttribute('type', 'password');
   }
}

。
.
.
.
.
.
函数showHide（）
{
const pwField=document.getElementById（“pwd”）；
const showHideValue=document.getElementById（“show”）.value；
if（showHideValue.trim（）=“Show”）
{
showHideValue=“隐藏”；
setAttribute（'type'，'text'）；
}
其他的
{
showHideValue=“Show”；
setAttribute（'type'，'password'）；
}
}
我的代码中的JQuery解决方案：（只需更改ID）

遵循以下步骤：
下载下面给出的图片。制作一个文件夹。将html文件和图像添加到同一文件夹中。相应地替换javascript和html代码中的“b.src”值

图像：


函数显示（）{
var a=document.getElementById（“pwd”）；
var b=document.getElementById（“眼睛”）；
如果（a.type==“密码”）{
a、 type=“text”；
b、 src=”https://i.stack.imgur.com/waw4z.png";
}否则{
a、 type=“密码”；
b、 src=”https://i.stack.imgur.com/Oyk1g.png";
}
}


另请参见
函数操作（）{
var my_pass=document.getElementById（“pass”）；
如果（我的密码类型==“密码”）{
my_pass.type=“text”；
}否则{
my_pass.type=“密码”；
}
}
Show
我们可以通过使用onclick事件来获取，让我们看看示例。这非常简单

HTML

<span>
      <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" onclick="showHide()" id="eye" />
</span>

简单内联解决方案：

<input type="password" id="myInput" name="myInput">
<button onclick="myInput.type = (myInput.type=='text') ? 'password' : 'text'; return false;"></button>


单击后是否可以更改图标！pWShowed

@downvoter-如果能说明问题中缺少jQuery标记之类的原因，我将不胜感激

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
} 

<span>
      <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" onclick="showHide()" id="eye" />
</span>

function showHide() {
                if (pwd.type == 'text') {
                    pwd.type = 'password';
                }
                else {
                    pwd.type = 'text';
                }
            }

<input type="password" id="myInput" name="myInput">
<button onclick="myInput.type = (myInput.type=='text') ? 'password' : 'text'; return false;"></button>