点击器游戏：金额达到阈值后显示升级按钮的实现问题

你的代码存在两个关键问题导致升级按钮无法按需求显示：

• 你在addMoney函数里定义了upgrade1函数，但从未调用过它，所以即使金币数量达标，也不会执行显示按钮的逻辑
• 判断条件money > 10不符合需求——你需要的是金币达到10美元就显示按钮，而这个条件要等到金币超过10才会触发，应该改为money >= 10

以下是修复后的完整代码：

JavaScript 代码 #

var money = 0
const addMoneyButton = document.getElementById('Clicker')
// 提前获取升级按钮元素，避免每次点击重复查询DOM
const upgradeButton = document.getElementById('upgrade1')

const addMoney = () => {
  money += 1
  // 用textContent更新纯文本内容比innerHTML更安全高效
  document.getElementById("money").textContent = money
  console.log(money)

  // 每次点击后直接检查金币数量，满足条件就显示升级按钮
  if (money >= 10) {
    upgradeButton.style.visibility = 'visible'
  }
}

addMoneyButton.addEventListener("click", addMoney)

HTML 代码 #

<button id="Clicker">Click To Begin Making Money</button>
<br>
<button id='upgrade1' style="visibility:hidden;">Upgrade Money Amount</button>
<h1>Money Amount: <span id='money'></span></h1>

额外优化点：

• 提前获取升级按钮元素，减少重复DOM查询，提升性能
• 用textContent替代innerHTML更新金币数值，纯文本场景下更安全且效率更高

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