Question

我该如何修复幻灯片中的这个 html 错误？

2022-12-29

106

javascript html

我对 html 还很陌生，所以我真的不知道该怎么做。我想创建一个图片幻灯片，但在浏览器控制台中出现此错误：

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

我没有尝试任何东西，因为我不知道我可以尝试什么。

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>

Answer 1

问题是你的标签位于你的实际 HTML 之上，出于某种原因，在 HTML 实际呈现具有这些 ID 和标签类型的任何元素之前，Javascript 会首先被解析和执行...因此，只需将你的脚本标签放在正文下方，如下所示：

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

Answer 2

首先，请替换 body 关闭标记之前的 javascript 代码块，以修复 Uncaught TypeError。

目前，您的幻灯片未出现在页面上。

接下来，更新与幻灯片相关的 css。

整个工作代码如下：

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


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