слайд-шоу из школ w3

Question

У меня вопрос относительно слайд-шоу, которое я создаю для задания. Мои навыки отладки не самые лучшие, поскольку я новичок в HTML и JS. Моя проблема связана с получением typeError из строки в моем слайд-шоу JS. Проблема в этом блоке здесь:

 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";
}

Ошибка:

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

ссылка на эту строку:

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

Answer 1

Строка, на которую ссылается ошибка, предполагает, что в 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";
}

Что касается почему нет слайдов, я предполагаю, что вы используете это код слишком рано. См. Ответы на этот вопрос , чтобы узнать о причинах, по которым вы можете не видеть никаких совпадающих элементов.