游戏卡片开发：如何通过点击事件监听器获取元素innerHTML值？

你的代码存在两个核心问题：

1. 绑定powerSelect时参数逻辑错误 #

addEventListener触发的函数默认接收事件对象作为参数，并非你期望的卡片内容。所以powerSelect里的playChoice实际是Event实例，不是目标元素的innerHTML。

2. 直接调用battleSpeed(...)会导致函数立即执行 #

addEventListener的第二个参数需要传入函数引用，而battleSpeed(speed[5].innerHTML)是直接执行函数并返回结果，会在页面加载时就触发函数，点击卡片时反而没有响应。

修正后的代码示例 #

方案1：通过事件对象获取点击元素的内容 #

const speed = document.getElementsByClassName("speed");

// 修正powerSelect，从事件对象中提取目标元素的内容
function powerSelect(event) {
  const playChoice = event.target.innerHTML;
  console.log("Your Choice", playChoice);
  // 这里可直接调用数值对比逻辑，比如 battleSpeed(playChoice)
}

// 遍历所有speed卡片批量绑定事件，无需逐个写索引
for (const card of speed) {
  card.addEventListener("click", powerSelect);
}

方案2：用匿名函数包裹，传递当前卡片内容给对比函数 #

const speed = document.getElementsByClassName("speed");

function battleSpeed(value) {
  console.log("待对比数值：", value);
  // 在这里编写数值对比的核心逻辑
}

// 点击时才调用battleSpeed并传入当前卡片的内容
for (const card of speed) {
  card.addEventListener("click", function() {
    battleSpeed(card.innerHTML);
  });
}

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