点击按钮出现event.target.id is not a function错误，如何解决？

核心错误原因 #

event.target.id是DOM元素的属性，不是方法，你错误地把它当成函数调用event.target.id("car")，这直接触发了报错。

修复步骤及完整代码 #

1. 修正点击判断逻辑

把判断条件从if (event.target.id("car"))改为if (event.target.id === "car")，直接对比id属性的值即可。

2. 修正事件绑定范围

原代码document.querySelector('button')只会给页面第一个按钮绑定事件，改为直接选中id为car的按钮，确保只有目标按钮触发零件累加逻辑。

3. 修复HTML结构错误

所有页面元素必须放在<html>和<body>标签内部，同时给空id的按钮补充合理id，避免潜在的DOM操作问题。

4. 修正document.write的错误使用

原HTML中document.write(karpartz)会触发变量未定义报错，改为直接通过DOM操作更新页面内容。

修正后的完整代码 #

JavaScript代码

var multiplier = 1;
var carparts = 0;
// 初始化显示零件数
document.getElementById("karpartz").textContent = carparts;

function onButtonClick(event) {
  // 正确判断按钮id
  if (event.target.id === "car") {
    carparts += multiplier;
    document.getElementById("karpartz").textContent = carparts;
  }
}

// 给目标按钮绑定点击事件
const carButton = document.getElementById("car");
carButton.addEventListener('click', onButtonClick);

HTML代码

<html>
  <body>
    <h1>汽车零件收集器</h1>
    <button id="car" type="submit">
      <img src="example" alt="buttonpng" border="0" />
    </button>

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

    <p id="karpartz"></p>
  </body>
</html>

额外优化建议 #

• 用textContent代替innerHTML更新文本内容，更安全且性能更优。
• 修正变量名拼写错误：multiplyer改为multiplier（符合英语拼写规范）。

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