HTML幻灯片切换按钮失效，JavaScript报错排查求助

错误原因 #

1. JavaScript语法错误（Unexpected token '<'）：你的JS代码中使用了HTML实体转义字符（如>、<、"），这些字符在JS解析时会被当作无效语法，导致整个脚本执行失败，进而引发plusSlides未定义的错误。
2. 幻灯片元素选择错误：当前JS代码获取的是class为slideshow的div容器，而实际的幻灯片项是容器内的<a>标签，这会导致切换逻辑完全失效。

修复后的完整代码 #

HTML部分 #

<div class="slideshow">
  <a href="Updates/11_Oct_2023.html"><img src="Updates/11_Oct_2023.JPG"></a>
  <a href="Updates/11_Oct_2023.html"><img src="Updates/11_Oct_2023.JPG"></a>
  <a href="link3.html"><img src="image3.jpg"></a>
</div>

<button id="prev">Prev</button>
<button id="next">Next</button>

JavaScript部分 #

<script>
  var slideIndex = 1;
  showSlides(slideIndex);

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

  function showSlides(n) {
    var i;
    // 选择slideshow容器内的所有a标签作为幻灯片项
    var slides = document.querySelectorAll(".slideshow a");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
  }

  // 绑定按钮事件（替代inline onclick）
  document.getElementById('prev').addEventListener('click', function() {
    plusSlides(-1);
  });
  document.getElementById('next').addEventListener('click', function() {
    plusSlides(1);
  });
</script>

关键修复点说明 #

• 把JS代码中的HTML实体转义字符替换为原生JS符号（如"改为"、>改为>），解决语法解析错误。
• 将幻灯片选择器从document.getElementsByClassName("slideshow")改为document.querySelectorAll(".slideshow a")，正确获取每个幻灯片项。
• 移除按钮的inlineonclick属性，改用addEventListener绑定事件，让代码结构更清晰易维护。

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