Что означает эта ошибка "Uncaught TypeError: Невозможно прочитать свойство 'style' of undefined"? - PullRequest
Новая
       1

Что означает эта ошибка "Uncaught TypeError: Невозможно прочитать свойство 'style' of undefined"?

0 голосов
/ 01 марта 2020

Я только что изменил img файлы, но у него было это сообщение «Uncaught TypeError: Невозможно прочитать свойство 'style' of undefined". Что не так с моим кодом? 

<body>

  <h2 style="text-align:center">Slideshow Gallery</h2>

  <div class="slideshow-container">

    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="COLOURBOX1.jpg" style="width:100%">
      <div class="text">Caption One</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="COLOURBOX10.jpg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="COLOURBOX2.jpg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>

  </div>

  <br>

  <div style="text-align:center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>

var slideIndex = 0;
showSlides();

Это JS ниже. И "slides [slideIndex-1] .style.display =" block ";" в этой части есть сообщение об ошибке, о котором я упоминал. 

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    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";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

1 Ответ

1 голос
/ 01 марта 2020

Кажется, ваш код работает до полной загрузки DOM. Вы можете поместить свой код внизу тега body или обернуть его кодом DOMContentLoaded:

. Событие DOMContentLoaded возникает, когда исходный документ HTML полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров. 

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
           slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        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";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
  });
</script>

<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="COLOURBOX1.jpg" style="width:100%">
    <div class="text">Caption One</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="COLOURBOX10.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="COLOURBOX2.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

</div>

<br>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...