游戏功能正常但控制台报TypeError错误，请求排查解决

我的打地鼠游戏功能正常，但控制台一直报错，移除首页动画后问题依旧，作为编程新手完全不知道怎么解决。报错信息如下：

• script.js:28 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')，位于randomSquare函数（script.js:28:17）
• script.js:80 Uncaught TypeError: Cannot set properties of null (setting 'textContent')，位于countDown函数（script.js:80:24）

游戏代码如下：

const squares = document.querySelectorAll('.square');
const mole = document.querySelector('.mole-image');
const timeLeft = document.querySelector('#time-left');
const scoreDisplay = document.querySelector('#score');
const cursor = document.querySelector("\".cursor-mallet img\"");

let molePosition;
let score = 0;
let currentTime = 20;
let timerId = null;


let successfulWhack = () => new Audio("assets/audio/hit-sound.flac").play();
let playSound = () => new Audio("assets/audio/hammer-whack.wav").play();
let audio = document.getElementById('audio');
let playPauseBtn = document.getElementById('playPauseBtn');
let count = 0;


function randomSquare() {
squares.forEach(square => {
  square.classList.remove('mole-image');
});

let randomSquare = squares[Math.floor(Math.random() * 12)];
   randomSquare.classList.add('mole-image');


   molePosition = randomSquare.id;
}
  squares.forEach(square => {
  square.addEventListener('mousedown', () => {
  if (square.id == molePosition) {
    successfulWhack();
    score++;
    scoreDisplay.textContent = score;
    molePosition = null;
  }
});
});

function moveMole() {
 moleTimerId = setInterval(randomSquare, 800);
}

moveMole();

function countDown() {
  currentTime--;
  timeLeft.textContent = currentTime;
  
if (currentTime ==  0) {
    clearInterval(countDownTimerId);
    clearInterval(moleTimerId);
    window.alert('GAME OVER! Your final score is ' + score);
    location.reload();
    playSound();
    }
  }
let countDownTimerId = setInterval(countDown, 1000);

错误1：Cannot read properties of undefined (reading 'classList') #

原因 #

你在randomSquare函数里硬写了Math.floor(Math.random() * 12)来生成随机下标，但如果页面中.square元素的实际数量不足12个，squares[随机数]就会返回undefined，调用classList自然会触发报错。

修复方案 #

改用squares.length动态获取元素数量，确保随机下标不会超出数组范围：

function randomSquare() {
  // 先判断是否有可用方块，避免空数组报错
  if (squares.length === 0) return;
  
  squares.forEach(square => {
    square.classList.remove('mole-image');
  });

  // 用squares.length替代固定的12
  let randomSquare = squares[Math.floor(Math.random() * squares.length)];
  randomSquare.classList.add('mole-image');
  molePosition = randomSquare.id;
}

错误2：Cannot set properties of null (setting 'textContent') #

原因 #

timeLeft变量通过document.querySelector('#time-left')获取，如果页面中不存在id为time-left的元素，或者id拼写错误（大小写不匹配），timeLeft就会是null，执行timeLeft.textContent = currentTime就会报错。

修复方案 #

1. 检查HTML页面，确保存在带id="time-left"的元素，比如：<span id="time-left">20</span>，注意id的大小写要和JS选择器完全一致。
2. 在countDown函数中增加判断，避免timeLeft为null时执行赋值：

function countDown() {
  currentTime--;
  // 只有timeLeft存在时才赋值
  if (timeLeft) {
    timeLeft.textContent = currentTime;
  }
  
  if (currentTime == 0) {
    clearInterval(countDownTimerId);
    clearInterval(moleTimerId);
    window.alert('GAME OVER! Your final score is ' + score);
    location.reload();
    playSound();
  }
}

额外小问题 #

你定义的cursor变量选择器写错了，多了一层引号，应该改成：

const cursor = document.querySelector(".cursor-mallet img");

内容的提问来源于stack exchange，提问作者chris-t93