2017-01-16 184 views
0

我是JavaScript新手。我知道这个主题有几个帖子,但我找不到能够解决我的问题的帖子。getElementsByClassName返回undefined

我想更改类别为mainSlidesdot的元素的属性。但是当我尝试使用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";

无法读取属性 '风格' 得到一个错误的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> 

我m不知道我的问题是在设置课程还是使用getElementsByClassName

+1

如果'slides'是未定义那么你会得到一个错误,试图读'slideIndex-1' o f未定义,而不是未定义的'style'。 – Quentin

+1

看起来'slides.length'是'0','slideIndex-1 === -1'。或者'n === 1'和'slideIndex'没有设置。 – Oriol

+0

只是简单的说明,您可能会遇到代码中的问题,以便删除“活动”类。你应该考虑使用'dots [i] .classList.remove(“active”)'来代替。 –

回答

0

您的代码有一些逻辑问题:

  • 如果n > slides.lengthn >= 1,然后slideIndex = 1
    • 如果slides.length >= 1
      OK,那么你可以使用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
      OK,那么你可以使用slides[slideIndex-1]
    • 如果slides.length === 0
      问题,slides[slideIndex-1]undefined