JS轮播图开发中addEventListener点击事件不生效问题求助

• 类名拼写错误：你在遍历移除slide的激活类时，把active错写为actve，导致激活状态无法正常清除，视觉上看起来点击事件没有触发
• 计数变量定义错误：你用const声明了slideNumber，const定义的常量无法重新赋值，后续如果要做轮播页码递增/递减逻辑会直接抛出JS异常，阻塞后续代码执行
• 逻辑不完整：当前点击事件仅实现了移除所有激活类的逻辑，没有更新轮播页码、也没有给当前要展示的轮播项和对应指示器添加激活类，点击后没有可见的视图变化，会误认为事件没生效
• 事件绑定时机错误：如果你的script标签放在页面head位置，执行JS代码时DOM还没完成渲染，document.querySelector(".next-btn")会取到null值，事件绑定直接失败。

修正后可正常运行的完整代码示例：

// 确保DOM加载完成后再执行JS逻辑
document.addEventListener("DOMContentLoaded", () => {
  const nextBtn = document.querySelector(".next-btn");
  const prevBtn = document.querySelector(".prev-btn");
  const slides = document.querySelectorAll(".slide");
  const slider = document.querySelector(".slider");
  const slideIcons = document.querySelectorAll(".slide-icon");

  const numberOfSlides = slides.length;
  // 把const改为let，支持后续赋值修改
  let slideNumber = 0;

  // 下一张按钮点击逻辑
  nextBtn.addEventListener("click" ,() => {
    slideNumber++;
    // 边界处理：到最后一张回到第一张
    if(slideNumber >= numberOfSlides) {
      slideNumber = 0;
    }
    
    // 先移除所有激活状态
    slides.forEach(slide => {
      slide.classList.remove("active");
    });
    slideIcons.forEach((slideIcon) => {
      slideIcon.classList.remove("active");
    });

    // 给当前轮播项和对应指示器加激活状态
    slides[slideNumber].classList.add("active");
    slideIcons[slideNumber].classList.add("active");
  })

  // 上一张按钮逻辑可以参考下一张的实现，做递减和边界处理即可
})

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