为何classList为undefined？前端测验页面报错求助

报错详情 #

报错信息：Uncaught TypeError: Cannot read properties of undefined (reading 'classList')，对应代码第86、87行：

slides[currentSlide].classList.remove('active-slide');
slides[n].classList.add('active-slide');

核心原因 #

代码执行顺序错误：

• 你先执行了const slides = document.querySelectorAll(".slide")，此时buildQuiz()函数还未调用，页面上还没有生成带.slide类的DOM元素，所以slides是一个空的NodeList。
• 随后直接调用showSlide(currentSlide)，尝试访问slides[currentSlide]（即slides[0]），但空列表中没有该元素，返回undefined，自然无法读取classList属性。

修复方案 #

方案1：调整代码执行顺序（最优） #

先调用buildQuiz()生成幻灯片DOM，再获取slides并初始化：
修改变量定义部分的代码，调整顺序如下：

// Variables
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');

const myQuestions = [
  // 原问题数组内容保持不变
];

// 先构建测验内容，生成.slide元素
buildQuiz();

const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;

showSlide(currentSlide);

submitButton.addEventListener('click', showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);

方案2：添加防御性判断（可选，增强代码健壮性） #

在showSlide函数中先检查元素是否存在，避免报错：

function showSlide(n) {
  // 检查当前幻灯片是否存在
  if (slides[currentSlide]) {
    slides[currentSlide].classList.remove('active-slide');
  }
  // 检查目标幻灯片是否存在
  if (slides[n]) {
    slides[n].classList.add('active-slide');
    currentSlide = n;
    
    // 按钮显示逻辑
    previousButton.style.display = currentSlide === 0 ? 'none' : 'inline-block';
    if(currentSlide === slides.length - 1){
      nextButton.style.display = 'none';
      submitButton.style.display = 'inline-block';
    } else {
      nextButton.style.display = 'inline-block';
      submitButton.style.display = 'none';
    }
  }
}

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