如何用JavaScript修改input type属性？密码显隐切换失效排查

故障根因 #

你的代码存在3个直接导致功能失效的问题：

• DOM API调用错误：getElementById是document对象的内置方法，直接在全局作用域裸调用会抛出ReferenceError，函数执行直接中断，点击图标自然没有任何响应。
• HTML id重复：HTML规范要求单个页面内id属性必须全局唯一，你给眼睛图标、密码输入框设置了相同的idtoggle_password，哪怕修复了API调用问题，选择器拿到的也是排在DOM树更前面的图标元素，根本获取不到密码输入框实例。
• 交互反馈缺失：切换显隐状态时没有同步切换图标样式，用户无法直观感知当前密码的展示状态。

修复后完整可运行代码 #

JavaScript逻辑 #

function toggle_password() {
  const pwdInput = document.getElementById("pwd_input");
  const toggleIcon = document.getElementById("toggle_pwd_icon");
  if (pwdInput.type === "password") {
    pwdInput.type = "text";
    // 明文状态切换为带斜杠的闭眼图标
    toggleIcon.classList.replace("fa-eye", "fa-eye-slash");
  } else {
    pwdInput.type = "password";
    // 密文状态切回睁眼图标
    toggleIcon.classList.replace("fa-eye-slash", "fa-eye");
  }
}

HTML结构 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
  <i class="fa fa-eye" aria-hidden="true" id="toggle_pwd_icon" onclick="toggle_password()"></i>
  <input id="pwd_input" class="align from_Input password" type="password" placeholder="Password" required />
</div>

实现说明 #

• 核心切换逻辑保持原本的实现思路：通过修改input元素的type属性实现显隐切换，type="password"时输入内容展示为密文掩码，type="text"时展示明文，该方案兼容所有主流浏览器，无额外依赖。
• 给图标和输入框分配了独立id，从根源上避免id冲突导致的选择器失效问题。
• 同步增加了图标状态切换逻辑，符合现代化密码输入框的交互预期。
• 事件属性修正为标准全小写写法onclick，避免极端场景下的属性解析兼容问题。

内容的提问来源于stack exchange，提问作者Pooyan