JavaScript卡牌游戏开发：如何从HTML元素中提取纯整数数字

首先，你代码里的核心问题是对getElementsByClassName的返回值理解有误——它返回的是HTMLCollection（类数组的元素集合），不是单个元素，所以直接访问.innerText会得到undefined（这就是你第一行代码无效的原因）。虽然你后面用了索引访问单个元素，但还需要做些健壮性处理，避免报错和转换失败。

问题点梳理 #

• getElementsByClassName("power")返回集合，必须通过[索引]定位到单个元素后，才能读取.innerText
• 直接用parseInt可能遇到：元素不存在导致的undefined、内容含空格/非数字字符、缺少数值基数（建议始终加10作为第二个参数）
• 未检查目标元素是否存在，若索引超出集合长度，会触发Cannot read properties of undefined错误

优化后的代码 #

// 先获取所有power元素集合
const powerElements = document.getElementsByClassName("power");

// 检查目标元素是否存在，再提取内容并转整数
const opNum0 = powerElements[0] ? parseInt(powerElements[0].innerText.trim(), 10) : 0;
const myNum3 = powerElements[3] ? parseInt(powerElements[3].innerText.trim(), 10) : 0;

console.log(myNum3);

if (myNum3 > opNum0) {
  alert("you win");
} else {
  alert(myNum3);
  scoreCountYou();
}

更严谨的写法（用querySelectorAll） #

如果需要更灵活的选择器，或者想更安全地处理集合，可以用querySelectorAll，它返回的是NodeList，支持forEach遍历：

const powerElements = document.querySelectorAll(".power");

// 封装提取数值的函数，统一处理元素不存在、非数字内容的情况
const getPowerNum = (index) => {
  const element = powerElements[index];
  if (!element) return 0;
  const text = element.innerText.trim();
  // 用Number()转换，若内容不是有效数字会返回NaN，这里处理为0
  return isNaN(Number(text)) ? 0 : Number(text);
};

const opNum0 = getPowerNum(0);
const myNum3 = getPowerNum(3);

console.log(myNum3);

if (myNum3 > opNum0) {
  alert("you win");
} else {
  alert(myNum3);
  scoreCountYou();
}

关键注意事项 #

• 始终检查元素是否存在，避免索引越界导致的报错
• 用.trim()去除内容前后的空格，避免因空格导致parseInt失败
• parseInt第二个参数必须传10（十进制），防止意外解析为八进制（比如开头是0的数字）
• 如果需要严格的数字转换，用Number()替代parseInt，它对非数字内容返回NaN，方便后续处理

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