点击器游戏：如何判断点击按钮及解决[object HTMLParagraphElement]问题

一、修复[object HTMLParagraphElement]显示异常 #

问题原因 #

1. 你在<h1>中的脚本直接执行document.write(karpartz)，这里的karpartz不是你定义的变量，浏览器会自动将其映射为id为karpartz的DOM元素对象，直接输出对象就会显示[object HTMLParagraphElement]。
2. HTML结构不规范：<p id="karpartz">放在了<html>标签外面，不符合HTML语法，可能导致渲染异常。

解决代码 #

修正后的规范HTML结构（所有内容放入<body>内）：

<html>
  <body>
    <button type="submit">
      <img src="example" alt="buttonpng" border="0" />
    </button>

    <button>
      upgrade click power
    </button>
    <button>
      upgrade idle scrapping
    </button>

    <p id="karpartz"></p>
    <h1 id="carparts-header"></h1>

    <script type="text/javascript">
      var multiplyer = 1
      var carparts = 0;
      const karpartzEl = document.getElementById("karpartz");
      const headerEl = document.getElementById("carparts-header");
      
      // 统一更新显示的函数
      function updateDisplay() {
          karpartzEl.innerHTML = carparts;
          headerEl.innerHTML = carparts;
      }
      // 初始化显示
      updateDisplay();
    </script>
  </body>
</html>

二、实现按钮点击判断功能 #

你当前代码只能给第一个按钮绑定事件，因为document.querySelector('button')只会选中页面第一个按钮。以下是几种实用实现方法：

方法1：给按钮加自定义属性，统一处理点击 #

给每个按钮添加data-action属性标记功能，在事件处理函数中判断属性值区分操作：

修改后的HTML：

<button type="submit" data-action="collect">
  <img src="example" alt="buttonpng" border="0" />
</button>

<button data-action="upgrade-click">
  upgrade click power
</button>
<button data-action="upgrade-idle">
  upgrade idle scrapping
</button>

修改后的JavaScript：

var multiplyer = 1
var carparts = 0;
const karpartzEl = document.getElementById("karpartz");

function updateCarpartsDisplay() {
    karpartzEl.innerHTML = carparts;
}
updateCarpartsDisplay();

// 给所有按钮绑定点击事件
document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', function() {
    const action = this.getAttribute('data-action');
    switch(action) {
      case 'collect':
        carparts += multiplyer;
        updateCarpartsDisplay();
        break;
      case 'upgrade-click':
        if(carparts >= 10) {
          carparts -=10;
          multiplyer +=1;
          updateCarpartsDisplay();
          alert(`点击威力提升！当前倍数：${multiplyer}`);
        } else {
          alert('零件不够！');
        }
        break;
      case 'upgrade-idle':
        alert('闲置升级功能待实现');
        break;
    }
  });
});

方法2：给按钮加唯一ID，分别绑定事件 #

如果按钮数量不多，可给每个按钮设置ID，单独绑定对应逻辑：

HTML：

<button id="collect-btn" type="submit">
  <img src="example" alt="buttonpng" border="0" />
</button>

<button id="click-upgrade-btn">
  upgrade click power
</button>
<button id="idle-upgrade-btn">
  upgrade idle scrapping
</button>

JavaScript：

var multiplyer = 1
var carparts = 0;
const karpartzEl = document.getElementById("karpartz");

function updateCarpartsDisplay() {
    karpartzEl.innerHTML = carparts;
}
updateCarpartsDisplay();

// 收集按钮事件
document.getElementById('collect-btn').addEventListener('click', function() {
  carparts += multiplyer;
  updateCarpartsDisplay();
});

// 点击升级按钮事件
document.getElementById('click-upgrade-btn').addEventListener('click', function() {
  if(carparts >=10) {
    carparts -=10;
    multiplyer +=1;
    updateCarpartsDisplay();
    alert('点击威力+1！');
  } else {
    alert('零件不足');
  }
});

// 闲置升级按钮事件
document.getElementById('idle-upgrade-btn').addEventListener('click', function() {
  alert('闲置升级待开发');
});

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