What does this error "Uncaught TypeError: Cannot read property 'style' of undefined" means?

Question

I just changed img files but it had this message "Uncaught TypeError: Cannot read property 'style' of undefined". What was wrong with my code?

<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();

This is JS below. And "slides[slideIndex-1].style.display = "block"; " this part has a error message I mentioned.

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
}

@PrakashReddyPotlapadu, you will get the error if you place the code before the body. — Mamun

Mamun Mamun · Accepted Answer · 2020-03-01T09:12:59

It seems your code is running before the DOM is fully loaded. You can either place your code at the bottom of the body tag or wrap your code with DOMContentLoaded:

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

<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>

What does this error "Uncaught TypeError: Cannot read property 'style' of undefined" means?

1 Answers