JavaScript修改元素属性问题：点击器游戏升级按钮无法启用

你的代码里有几个核心逻辑错误，导致按钮始终无法启用：

• 事件绑定逻辑完全颠倒：你把「启用升级按钮」的判断放在了升级按钮自己的点击事件里，但按钮默认是禁用状态，根本触发不了这个点击事件，所以这段判断代码永远不会执行。
• 加金币的事件被错误嵌套：你把点击加金币的事件监听放在了升级按钮的点击事件里，这意味着只有先点击升级按钮（但它是禁用的），加金币的功能才会生效，完全搞反了顺序。
• 启用按钮的时机不对：应该在玩家金币（count）发生变化的时候（比如每次点击加金币后），检查是否满足购买条件，再决定是否启用升级按钮，而不是点击升级按钮的时候才检查。

修正后的代码示例 #

<div>
  <p>当前金币: <span id="countDisplay">0</span></p>
  <button id="counterPlusElem">点击加1金币</button>
  <button class="upGradeA" disabled>+1 per click (Cost: $20)</button>
</div>

<script>
  let count = 0;
  const countDisplayElem = document.getElementById('countDisplay');
  const counterPlusElem = document.getElementById('counterPlusElem');
  const buttonUpgradeElem = document.querySelector('.upGradeA');

  // 更新金币显示并检查按钮状态
  function updateDisplay() {
    countDisplayElem.textContent = count;
    // 金币足够就启用按钮，否则禁用
    buttonUpgradeElem.disabled = count < 20;
  }

  // 点击加金币的事件，页面加载后即可使用
  counterPlusElem.addEventListener("click", () => {
    count += 1;
    updateDisplay();
  });

  // 升级按钮的点击逻辑（只有按钮启用时才能触发）
  buttonUpgradeElem.addEventListener("click", () => {
    count -= 20;
    // 这里可以添加升级后的功能，比如把单次点击加1改成加2
    counterPlusElem.removeEventListener("click", addOne);
    function addTwo() { count += 2; updateDisplay(); }
    counterPlusElem.addEventListener("click", addTwo);
    updateDisplay();
  });

  // 初始化页面显示
  updateDisplay();
</script>

关键修正点 #

1. 把按钮状态检查整合到更新函数：每次金币变化后自动判断是否满足条件，同步更新按钮的禁用状态。
2. 调整事件绑定层级：加金币的事件直接独立绑定，确保页面加载后就能正常点击攒金币。
3. 升级按钮只处理购买逻辑：因为只有金币足够时按钮才会启用，点击时直接执行扣费和升级操作即可。

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