密码输入框图标切换失效排查：为何图标无法正常切换？

问题核心原因 #

你的代码存在两个关键错误，导致图标无法正常切换：

1. JS变量名不匹配
   你定义了const eyeIcon = document.querySelector("#eye");，但绑定点击事件时使用的是eye.addEventListener——eye变量未定义，控制台会抛出ReferenceError。你提到密码框能正常切换，大概率是实际代码中变量名写错了（比如把eyeIcon写成了eye），但贴出的代码里这个错误会直接导致事件无法触发。

2. 图标类切换逻辑错误
   初始图标类是fa-solid fa-eye，点击时仅执行this.classList.toggle("fa-eye-slash")：

   • 第一次点击：元素同时拥有fa-eye和fa-eye-slash两个图标类，Font Awesome无法正确渲染（两个类冲突，通常只会显示其中一个），所以看起来图标没变化。
   • 第二次点击：移除fa-eye-slash，回到初始状态，图标仍为fa-eye。

   当你把初始类改成fa-eye-slash并切换fa-eye时，同样会出现类共存的问题，只是因为显示优先级的关系看起来能切换，但逻辑和密码框状态完全相反。

修复方案 #

方案一：同时切换两个图标类（简洁版）

修正变量名后，用toggle同时切换fa-eye和fa-eye-slash，确保同一时间只有一个图标类存在：

const passwordField = document.querySelector("#password");
const eyeIcon = document.querySelector("#eye");

eyeIcon.addEventListener("click", function() {
  // 同时切换两个图标类，保证互斥
  this.classList.toggle("fa-eye");
  this.classList.toggle("fa-eye-slash");
  
  const type = passwordField.getAttribute("type") === "password" ? "text" : "password";
  passwordField.setAttribute("type", type);
})

方案二：明确状态判断（可读性更强）

通过判断密码框的类型，手动添加/移除对应图标类，逻辑更清晰：

const passwordField = document.querySelector("#password");
const eyeIcon = document.querySelector("#eye");

eyeIcon.addEventListener("click", function() {
  const isPasswordHidden = passwordField.getAttribute("type") === "password";
  
  if (isPasswordHidden) {
    // 切换为显示密码，图标改为"隐藏"样式
    this.classList.remove("fa-eye");
    this.classList.add("fa-eye-slash");
    passwordField.setAttribute("type", "text");
  } else {
    // 切换为隐藏密码，图标改为"显示"样式
    this.classList.remove("fa-eye-slash");
    this.classList.add("fa-eye");
    passwordField.setAttribute("type", "password");
  }
})

效果验证 #

修正后，点击图标时：

• 密码框隐藏（type="password"）→ 显示fa-eye图标，点击后切换为type="text"并显示fa-eye-slash图标
• 密码框显示（type="text"）→ 显示fa-eye-slash图标，点击后切换为type="password"并显示fa-eye图标

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