Google Chrome轮播代码反复触发TypeError错误求助

错误原因 #

你碰到的Cannot read properties of undefined (reading 'style')和Cannot read properties of undefined (reading 'className')报错，核心是索引越界：

• 原代码只处理了n > slides.length的场景，完全没考虑n < 1的情况。当点击prev箭头让slideIndex变成0或负数时，slides[slideIndex-1]和dots[slideIndex-1]会变成undefined，触发属性读取错误。
• 首次加载时的空白问题，是因为初始执行showSlides时，若DOM未完全加载，getElementsByClassName可能返回空集合，导致后续操作失败。

修复后的代码 #

JavaScript 代码 #

let slideIndex = 1;
// 确保DOM加载完成后再初始化轮播
document.addEventListener('DOMContentLoaded', function() {
  showSlides(slideIndex);
});

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName('mySlides');
  let dots = document.getElementsByClassName('dot');
  
  // 补充边界判断，防止索引越界
  if (n > slides.length) {
    slideIndex = 1;
  } 
  if (n < 1) {
    slideIndex = slides.length;
  }
  
  // 隐藏所有幻灯片
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  // 移除所有dot的active类（加空格避免类名拼接错误）
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  
  // 显示当前幻灯片并激活对应dot
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

关键修复点 #

1. 补全边界逻辑：新增n < 1的判断，当索引小于1时自动跳转到最后一张幻灯片，彻底避免越界。
2. DOM加载监听：用DOMContentLoaded确保初始化代码在DOM完全渲染后执行，解决首次加载空白问题。
3. 优化类名操作：给active前后加空格，避免出现dotactive这类无效类名。

效果验证 #

• 页面刷新后首张幻灯片正常显示，无报错。
• 点击prev/next箭头可循环切换，不再触发TypeError。
• 点击底部dot切换幻灯片功能正常，无异常报错。

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