条件满足但if语句未执行元素类修改动作的问题求助

你的代码核心问题在于条件判断的执行时机错误：

if (condition >= 12) 被放在了setTimeout的回调函数里，添加完点击事件后立刻执行。这时候用户还没有点击任何按钮，condition的值还是初始的0，所以这个判断只会在4秒后运行一次，之后哪怕后续点击按钮让condition涨到12，也不会再触发这个判断逻辑。

修复代码 #

把条件判断逻辑移到点击事件的回调函数内部，每次点击更新condition后就立刻检查是否满足条件：

const pwnButtonHidden = document.querySelector(".pwn-button-hidden");
let condition = 0;

for (let idNumber = 1; idNumber < 13; idNumber++) {
  setTimeout(() => {
    // 提前缓存元素，避免重复DOM查询
    const btn = document.getElementById(`btn-${idNumber}`);
    const product = document.getElementById(`product-${idNumber}`);
    
    btn.addEventListener("click", (e) => {
      condition++;
      console.log(condition);
      
      // 修改产品元素类名
      product.className = "product-fake";
      // 若需保留其他类，改用：
      // product.classList.add("product-fake");
      // product.classList.remove("原产品类名");
      
      btn.disabled = true;
      btn.removeEventListener("mouseenter", selectSfx, true);
      
      // 每次点击后检查条件
      if (condition >= 12) {
        // 替换按钮类名
        pwnButtonHidden.className = "pwn-button";
        // 若需保留其他类，改用：
        // pwnButtonHidden.classList.replace("pwn-button-hidden", "pwn-button");
      }
    });
  }, 4000);
}

额外优化建议 #

1. 缓存DOM元素：提前用变量存储btn和product元素，避免每次点击都重复调用getElementById，提升性能。
2. 使用classList操作类名：直接赋值className会覆盖元素所有原有类名，如果元素还有其他需要保留的类，用classList.add()/classList.remove()/classList.replace()会更稳妥。

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