JavaScript点击事件仅触发一次，我的代码出了什么问题？

问题排查与解决方法 #

• 1 按钮被遮挡（最高概率原因）
  切换显示的.testimonial元素设置为display: flex后，若没有配置层级属性，元素层级会高于按钮，导致后续点击实际命中的是轮播内容而不是按钮，无法触发点击事件。
  解决方法：给按钮添加层级样式：

  .next-btn, .prev-btn {
    position: relative;
    z-index: 99;
  }
  

• 2 按钮选择器匹配异常
  document.querySelector只会匹配页面中第一个符合条件的元素，若页面存在多个.next-btn/.prev-btn，会导致只有第一个按钮绑定了事件。如果需要适配多个按钮，可改用querySelectorAll遍历绑定事件：

  const nextBtns = document.querySelectorAll(".next-btn");
  nextBtns.forEach(btn => {
    btn.addEventListener("click", function () {
      index++;
      if (index > testimonials.length - 1) {
        index = 0;
      }
      show(index);
    })
  })
  // 上一页按钮同理修改为遍历绑定逻辑
  

• 3 全局变量污染
  你定义的全局变量index命名过于通用，若页面其他JS代码也修改了同名变量，会导致轮播计数异常，可将变量重命名为更独特的名称，比如testimonialActiveIndex避免冲突。
• 4 DOM动态变更导致集合不匹配
  querySelectorAll返回的是静态NodeList，若轮播运行过程中其他代码新增/删除了.testimonial元素，之前存储的testimonials集合会和实际DOM不一致，可把元素获取逻辑移入show函数，每次调用都取最新DOM：

  function show(activeIndex) {
    const latestTestimonials = document.querySelectorAll(".testimonial");
    latestTestimonials.forEach(item => {
      item.style.display = "none";
    });
    // 增加边界判断避免索引不存在报错
    if (latestTestimonials[activeIndex]) {
      latestTestimonials[activeIndex].style.display = "flex";
    }
  }
  

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