How do I fix this html error for a slideshow?

December 29, 2022

I am pretty new to html so I really don’t know what to do. I want to create an image slideshow but I get this error in the browsers console:

Uncaught TypeError: Cannot read properties of undefined (reading ‘style’)

I didn’t try anything because I don’t know what I possibly could try.

const slideshowImages = document.querySelectorAll('#slideshow img');
let currentIndex = 0;

function showNextImage() {
  slideshowImages[currentIndex].style.display = 'none';
  currentIndex = (currentIndex + 1) % slideshowImages.length;
  slideshowImages[currentIndex].style.display = 'block';
}

// console.log(slideshowImages);
setInterval(showNextImage, 5000);

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Milkshake', Arial, sans-serif;
}

h1 {
  text-align: center;
  font-size: 3.5em;
  margin-top: 1px;
}

p {
  margin: 20px 0;
  line-height: 1.5;
}

ul {
  list-style: none;
  margin: 20px 0;
  padding: 0;
}

header {
  overflow: hidden;
}

li {
  margin: 10px 0;
}

.content {
  position: relative;
  top: 1px;
  padding: 20px 1px;
}

img {
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  display: block;
  vertical-align: top;
}

#slideshow {
  position: relative;
}

#slideshow img {
  position: absolute;
  top: 400px;
  left: 400px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#menu {
  position: fixed;
  width: 100%;
  background-color: #333;
  color: #fff;
  z-index: 2;
}

#menu ul {
  display: flex;
  margin: 0;
  padding: 0;
}

#menu li {
  flex: 1;
  text-align: center;
}

#menu a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 20px;
}

#menu a:hover {
  background-color: #444;
}

<div id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Bildgallerie</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Datenschutz</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
</div>

<header>
  <img id="image" src="https://i.imgur.com/CcAmnTw.jpg" alt="Foto">
  <div id="slideshow">
    <img src="https://i.imgur.com/okK0XWD.jpg" alt="Slideshow image 1">
    <img src="https://i.imgur.com/Nq4gaBP.png" alt="Slideshow image 2">
    <img src="https://i.imgur.com/q9UR9DM.png" alt="Slideshow image 3">
  </div>
</header>

<div class="content">
  <h1>ParadisoPiccolo</h1>
  <h2>Location</h2>
  <p>Our apartment is located in the heart of the city</p>
  <h2>Features</h2>
  <ul>
    <li>2 bedrooms</li>
    <li>1 bathroom</li>
    <li>Fully equipped kitchen</li>
    <li>Spacious living room</li>
    <li>Balcony with city view</li>
  </ul>
  <h2>Rates</h2>
  <p>Daily rate: $100</p>
  <p>Weekly rate: $700</p>
  <p>Monthly rate: $2500</p>
</div>

>Solution :

The issue is that your tags are above your actual HTML, For some reason The Javascript is parsed and executed first, before the HTML actually renders any elements with those ids and tag types… so just put your script tags under the body like so:

    <!DOCTYPE html>
    <html>
    <head>
    <title>ParadisoPiccolo</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow: scroll;
    }
    h1, h2, h3, h4, h5, h6 {
    font-family: 'Milkshake', Arial, sans-serif;
    }
    h1 {
    text-align: center;
    font-size: 3.5em;
    margin-top: 1px;
    }
    p {
    margin: 20px 0;
    line-height: 1.5;
    }
    ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    }
    header {
    overflow: hidden;
    }
    li {
    margin: 10px 0;
    }
    .content {
    position: relative; 
    top: 1px; 
    padding: 20px 1px;
    }
    img {
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    vertical-align: top;
    }
    
    #slideshow {
    position: relative;
    }
    
    #slideshow img {
    position: absolute;
    top: 400px;
    left: 400px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    #menu {
    position: fixed;  
    width: 100%;  
    background-color: #333;  
    color: #fff;  
    z-index: 2;  
    }

    #menu ul {
    display: flex;  
    margin: 0;  
    padding: 0;  
    }

    #menu li {
    flex: 1;  
    text-align: center;  
    }

    #menu a {
    display: block;  
    color: #fff; 
    text-decoration: none; 
    padding: 20px;  
    }

    #menu a:hover {
    background-color: #444;
    }

    </style>

    </head>
    <body>
    <div id="menu">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Bildgallerie</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Datenschutz</a></li>
    <li><a href="#">Impressum</a></li>
    </ul>
    </div>
  
    <header>
    <img id="image" src="https://i.imgur.com/CcAmnTw.jpg" alt="Foto">
    <div id="slideshow">
    <img src="https://i.imgur.com/okK0XWD.jpg" alt="Slideshow image 1">
    <img src="https://i.imgur.com/Nq4gaBP.png" alt="Slideshow image 2">
    <img src="https://i.imgur.com/q9UR9DM.png" alt="Slideshow image 3">
    </div>
    </header>
 
    <div class="content">
    <h1>ParadisoPiccolo</h1>
    <h2>Location</h2>
    <p>Our apartment is located in the heart of the city</p>
    <h2>Features</h2>
    <ul>
    <li>2 bedrooms</li>
    <li>1 bathroom</li>
    <li>Fully equipped kitchen</li>
    <li>Spacious living room</li>
    <li>Balcony with city view</li>
    </ul>
    <h2>Rates</h2>
    <p>Daily rate: $100</p>
    <p>Weekly rate: $700</p>
    <p>Monthly rate: $2500</p>
    </div>
    </body>
    
        <script>
    const slideshowImages = document.querySelectorAll('#slideshow img');
    let currentIndex = 0;

    function showNextImage() {
    console.log(slideshowImages[currentIndex]);
    slideshowImages[currentIndex].style.display = 'none';
    currentIndex = (currentIndex + 1) % slideshowImages.length;
    slideshowImages[currentIndex].style.display = 'block';
    }
    console.log(slideshowImages);
    setInterval(showNextImage, 5000);

    </script>
    
    </html>