getElementsByClassName返回undefined

Question

我是JavaScript的新手。我知道这个主题有几个帖子，但我找不到一个似乎能解决我的问题。

我想更改类mainSlides和dot的元素的属性。但是当我尝试使用getElementsByClassName调用这些元素时，它会返回undefined。

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mainSlides");
  var dots = document.getElementsByClassName("dot");
  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";

当我在var dots = document ...处插入断点时，幻灯片未定义。然后我在slides[slideIndex-1].style.display = "block";

收到错误

  

无法阅读属性＆＃39; style＆＃39;未定义的

HTML看起来像这样：

    <div class="mainSlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="images/mainSlide1.jpg" style="width:100%">
      <div class="text">Caption Text</div>
    </div>

和

    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span> 
      <span class="dot" onclick="currentSlide(2)"></span> 
      <span class="dot" onclick="currentSlide(3)"></span> 
    </div>  

我不确定我的问题是在设置课程还是使用getElementsByClassName。

Answer 1

您的代码存在一些逻辑问题：

• 如果n > slides.length和n >= 1，则slideIndex = 1
  • 如果slides.length >= 1
    好的，那么您可以使用slides[slideIndex-1]
  • 如果slides.length === 0
    问题，slides[slideIndex-1]是undefined
• 如果1 <= n <= slides.length，则slideIndex未设置 slides[slideIndex-1]可能是个问题。
• 如果n < 1，则slideIndex = slides.length
  • 如果slides.length >= 1
    好的，那么您可以使用slides[slideIndex-1]
  • 如果slides.length === 0
    问题，slides[slideIndex-1]是undefined