Pokemon卡牌对战游戏AI模块querySelector未定义错误排查

项目背景 #

正在开发学校实践项目Pokemon Ultimate Battle Experience，核心规则：

• 共10张卡牌（玩家5张、PC5张）
• 玩家点击卡牌后移至中间区域，PC从卡组出牌
• 依据卡牌经验值判定归属，归属方获得卡牌且不可复用，同时将经验值累加至对应计数器，先达1000分者获胜

当前DOM操作、AJAX模块已完成，仅PC的AI模块存在问题。

报错信息 #

scripts.js:146 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'querySelector')

报错触发于elegirCarta函数中执行以下语句时：

if (parseInt(cartasMaquina[i].querySelector(".carta .experiencia").innerText) === exp)

函数逻辑：当play容器中存在1张卡牌时，获取玩家出牌经验值exp，遍历PC卡组cartasMaquina匹配对应经验值的卡牌。已尝试替换变量名为cartasMaquinas，无效。

错误原因及解决方案 #

可能原因 #

1. 数组越界导致cartasMaquina[i]为undefined：遍历cartasMaquina时，循环索引超出了数组的实际长度（比如数组长度为5，但循环到了索引5及以上），导致取到undefined值，调用querySelector时触发报错。
2. cartasMaquina数组元素非DOM节点：数组中存储的不是DOM元素，而是AJAX获取的原始数据对象（如包含经验值的JSON对象），这类对象没有querySelector方法，调用时自然报错。

解决方法 #

1. 确保遍历范围合法：使用数组长度限制循环索引，避免越界：

   for (let i = 0; i < cartasMaquina.length; i++) {
     // 循环逻辑
   }
   

2. 验证数组元素类型：在循环前打印数组内容，确认元素类型：

   console.log(cartasMaquina);
   

   • 如果是DOM节点：确保每个节点都存在.carta .experiencia元素，同时增加判空检查：

     const cartaMaquina = cartasMaquina[i];
     if (cartaMaquina) {
       const expElement = cartaMaquina.querySelector(".carta .experiencia");
       if (expElement) {
         const maquinaExp = parseInt(expElement.innerText);
         if (maquinaExp === exp) {
           // 匹配后的逻辑
         }
       }
     }
     

   • 如果是数据对象：直接从对象中读取经验值，无需调用querySelector：

     // 假设数据对象结构为 { experiencia: 200, ... }
     const maquinaExp = cartasMaquina[i].experiencia;
     if (maquinaExp === exp) {
       // 匹配后的逻辑
     }
     

3. 清理无效数组元素：检查cartasMaquina数组是否存在空值或已被移除的DOM节点，及时清理数组，避免遍历到无效元素。

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