目标轮播元素不存在时如何忽略JS代码执行避免报错

当页面不存在轮播相关元素时，document.getElementById('carousel__button--next')、document.getElementById('carousel__button--prev') 会返回null，对null调用addEventListener方法就会触发你遇到的类型错误。

给轮播代码添加存在性判断逻辑，只有检测到页面上有轮播核心元素时，才执行轮播初始化相关代码。修改后的完整代码如下：

let slidePosition = 0;
const slides = document.getElementsByClassName('carousel__item');
const totalSlides = slides.length;
// 提前获取按钮元素
const nextBtn = document.getElementById('carousel__button--next');
const prevBtn = document.getElementById('carousel__button--prev');

// 只有当两个按钮和轮播项都存在时，才执行后续轮播逻辑
if (nextBtn && prevBtn && totalSlides > 0) {
  nextBtn.addEventListener("click", function () {
    moveToNextSlide();
  });
  prevBtn.addEventListener("click", function () {
    moveToPrevSlide();
  });

  function updateSlidePosition() {
    for (let slide of slides) {
      slide.classList.remove('carousel__item--visible');
      slide.classList.add('carousel__item--hidden');
    }

    slides[slidePosition].classList.add('carousel__item--visible');
  }

  function moveToNextSlide() {
    if (slidePosition === totalSlides - 1) {
      slidePosition = 0;
    } else {
      slidePosition++;
    }

    updateSlidePosition();
  }

  function moveToPrevSlide() {
    if (slidePosition === 0) {
      slidePosition = totalSlides - 1;
    } else {
      slidePosition--;
    }

    updateSlidePosition();
  }
}

• 提前获取所有轮播依赖的核心元素（前后切换按钮、轮播项列表）
• 外层新增判断逻辑，只有所有核心元素都存在的情况下，才执行事件绑定、轮播函数定义的逻辑，没有轮播元素的页面会直接跳过该段代码，不会抛出错误。

内容的提问来源于stack exchange，提问作者Julia Woś