【已解决】JavaScript如何实现点击按钮后执行函数？点击buttonA扣减lives时函数提前执行

你的代码存在3个核心错误，直接导致扣血逻辑提前执行、事件绑定完全失效：

• 页面初始化阶段误调用扣血函数
  代码中document.getElementById("lives").innerHTML="LIVES: " + removeLives();属于页面加载就会执行的逻辑，这里直接调用了removeLives()，等同于刚打开页面就触发了一次扣血操作，完全不需要等待按钮点击。而且此时removeLives还未被正确定义，会直接出现执行异常。
• 函数定义语法非法
  你尝试在按钮的点击回调内部嵌套写removeLives() {的结构，这不符合JS的函数定义语法规则，属于直接的语法错误，会导致整个script块无法正常运行，removeLives根本不会被创建为可用的函数。
• 事件属性大小写错误
  HTML原生事件属性、DOM元素的JS事件绑定属性都是全小写的onclick，你写的驼峰式onClick属于自定义属性，不会被浏览器识别为点击事件触发的绑定逻辑。

调整逻辑顺序、修正语法错误后即可实现预期效果：

1. 将removeLives抽为独立的全局可访问函数，扣血执行后同步更新页面显示的生命值
2. 页面初始化时直接显示初始的3点生命值，不要主动调用removeLives
3. 统一使用小写的onclick绑定点击事件，避免大小写错误导致绑定失效

<html lang="en">
  <body>
    <div id="lives"></div>
    <button id="buttonA">buttonA</button>

<script>
  var lives = 3;

  // 正确定义独立的扣血函数
  function removeLives() {
    lives--;
    // 扣血完成后同步更新页面展示
    document.getElementById("lives").textContent = "LIVES: " + lives;
    return lives;
  }

  // 页面加载时仅展示初始生命值，不触发扣血
  document.getElementById("lives").textContent = "LIVES: " + lives;

  // 正确绑定按钮点击事件
  document.getElementById("buttonA").onclick = function() {
    removeLives();
  }
</script>
 </body>
</html>

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