Невозможно прочитать свойство 'style' undefined at slideshow ERROR

Я новичок в javascript, и я пытаюсь создать слайд-шоу внутри div. Однако, когда я это дает мне сообщение об ошибкеНевозможно прочитать свойство 'style' undefined at slideshow ERROR

Uncaught TypeError: Cannot read property 'style' of undefined at slideshow (script.js:14) at script.js:1

Это мой HTML код:

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <script type="text/javascript" src="script.js"></script> 
     <div id="wrapper"> 
      <div id="content"> 
       <div id="top"> 
        <img class="slide" src="1.png" style="width:100%"> 
        <img class="slide" src="2.png" style="width:100%"> 
       </div> 
       <div id="left"> 
       </div> 
       <div id="middle"> 
       </div> 
       <div id="right"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Это мой CSS код:

.slide { 
    display:none; 
}

Это мой код JavaScript:

slideshow(); 

function slideshow() { 
    var index = 0; 
    var i; 
    var slides = document.getElementsByClassName("slide"); 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    index++; 
    if (index > slides.length) { 
     index = 1; 
    }  
    slides[index-1].style.display = "block"; 
    setTimeout(slideshow, 2000); 
}

Я думаю, проблема в том, что javascript не может получить доступ к изображениям, когда они находятся в div.

источник

2017-02-02 Grandmango227

1. Вы размещаете файл <script> перед слайдами. Поэтому, когда ваш скрипт выполняется в первый раз, разметка еще не существует в DOM.
Поскольку слайды не существуют, после первоначального for (который ничего не делает), вы получите в этой линии

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

Но slides[0] не существует, поэтому он не имеет .style свойство.

2. Вы переназначить значение 0 для index каждый раз, когда вы повторно запустить функцию, поэтому она всегда будет показывать один и тот же слайд: первый.

(3.) Вы выбрали display как метод, чтобы показать/скрыть слайды, которая не является анимируемым. Поэтому ваши слайды резко изменятся, нет возможности перехода.

(4.) Кроме того, так же, как вопрос личного выбора, я предпочитаю document.querySelectorAll('.slide') к document.getElementsByClassName("slide"). Почему я не знаю точно. Вероятно, потому, что он короче и, возможно, потому, что он позволяет использовать более гибкий синтаксис селектора (классы, идентификаторы. Атрибуты или любой другой допустимый селектор css).

источник

2017-02-02 19:49:23

Большое вам спасибо. Ваш первый вопрос решил мою проблему, и теперь у меня есть рабочий стол. Я не могу поверить, насколько простым было решение. Спасибо снова – Grandmango227

Добро пожаловать (на [так]), @ Grandmango227. И счастливое кодирование! ::} <(((*> :: –

Невозможно прочитать свойство 'style' undefined at slideshow ERROR

ответ

Смежные вопросы