未捕获的类型错误：无法读取未定义的属性（读取“classList”）

Question

not quite sure why I'm getting an error in the console, the game is working correctly and I have fiddled around for hours trying to find a solution. I have a few error codes, the first one is script.js:28 Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at randomSquare (script.js:28:17) and the second error code is: script.js:80 Uncaught TypeError: Cannot set properties of null (setting 'textContent') at countDown (script.js:80:24) I think this could be due to having an animation of the game on my homepage but when I removed it, the error codes still appear. I'm fairly new to coding and completely lost right now, any help appreciated, thanks

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);

Answer 1

It looks like the randomSquare variable does not have a classList property. It looks like timeLeft is null.

You should be able to validate this by logging the values of each before you call them. For example, you can put this logging in place:

// in randomSquare()
let randomSquare = squares[Math.floor(Math.random() * 12)];
console.log('randomSquare: ' + JSON.stringify(randomSquare));
console.log('randomSquare.classList: ' + JSON.stringify(randomSquare.classList));

// in countDown()
currentTime--;
console.log('timeLeft: ' + JSON.stringify(timeLeft));

// This will probably throw an error and not print
console.log('timeLeft.textContent: ' + JSON.stringify(timeLeft.textContent));

edit: Try logging with and without JSON.stringify.

I would also change the randomSquare variable inside the function randomSquare() to be any different name so that you know you're not calling the function when you mean to be calling the variable.