How do I fix this html error for a slideshow?-CodePudding

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

CodePudding user response：

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

CodePudding user response：

First, please replace your javascript code block just before body close tag in order to fix your Uncaught TypeError.

And currently, your slide show doesn't appear on the page.

So next, update your css related to slideshow.

The whole working code as follows:

<!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;
            position: relative;
        }

        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: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
        }

        #slideshow img {
            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" style="display: block">
            <img src="https://i.imgur.com/Nq4gaBP.png" alt="Slideshow image 2" style="display: none">
            <img src="https://i.imgur.com/q9UR9DM.png" alt="Slideshow image 3" style="display: none">
        </div>
    </header>

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


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

    </script>
</body>

</html>