w3学校使用的幻灯片

Question

I have a question regarding a slide show I am building for an assignment. My debugging skills are not the best as I am new to HTML and JS. My problem comes from getting a typeError from a line in my slideshow JS. The problem is in this block here:

 var slideIndex = 1;
 showSlides(slideIndex);

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

 function currentSlide(n) {
   showSlides(slideIndex = n);
 }

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

The error is:

Uncaught TypeError: Cannot read property 'style' of 
undefined at showSlides 

referring to this line:

slides[slideIndex-1].style.display = "block";

Answer 1

The line that the error refers to assumes that there will be at least one slide in slides , but there can be no slides at all, and apparently there are no slides when you call your function.

You can bail out of the function early if there are no slides:

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (!slides.length) { // ***
    return;             // ***
  }                     // ***
  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";
}

As for why there aren't any slides, my guess would be that you're running this code too soon. See this question 's answers for reasons you may not be seeing any matching elements.