JS图片轮播控制台报Cannot read properties 'style'错误修复求助

错误原因 #

这个报错是代码初始化执行时访问了不存在的DOM元素导致的，主要有两个触发场景：

1. JS代码在页面DOM还未完成渲染时就执行，此时document.getElementsByClassName拿不到.sliderImage、.imageSliderDot对应的元素，得到的是空集合，后续访问集合元素的style属性时就会报undefined错误。功能不受影响是因为第一次初始化报错后，后续触发轮播切换时DOM已经加载完成，所以后续执行都正常。
2. 轮播图数量和下方指示点（dot）的数量不一致，会导致索引越界，访问到不存在的元素。

修复方案 #

方案1：调整JS执行时机，保证DOM加载完成后再初始化轮播 #

不要直接在代码顶部调用showSlides，改用DOMContentLoaded事件包裹初始化逻辑，或者把整个JS代码放到</body>标签之前加载。
修改初始化部分的代码如下：

// 把原来的顶部两行替换成这段
var slideIndex;
document.addEventListener('DOMContentLoaded', function() {
  slideIndex = 1;
  showSlides(slideIndex);
});

// 后面的plusSlides、currentSlide、showSlides函数保持不变

方案2：给轮播函数增加边界校验，避免非法访问 #

在showSlides函数最开头增加校验逻辑，没有获取到元素或者图和点数量不匹配时直接退出执行，避免报错：

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("sliderImage");
  var dots = document.getElementsByClassName("imageSliderDot");
  // 新增校验逻辑
  if (slides.length === 0 || dots.length === 0 || slides.length !== dots.length) {
    return;
  }
  // 以下是原有逻辑不变
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

两个方案可以同时使用，彻底解决报错问题。

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