无法在幻灯片错误中读取未定义的属性“样式”

Question

I am new to javascript and I am trying to create a slideshow inside divs.我是 javascript 新手，我正在尝试在 div 中创建幻灯片。 However when I do it give me the error message但是，当我这样做时，会给我错误消息

Uncaught TypeError: Cannot read property 'style' of undefined at slideshow (script.js:14) at script.js:1未捕获的类型错误：无法在 script.js:1 处的幻灯片放映 (script.js:14) 中读取未定义的属性“样式”

This is my HTML code:这是我的 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <script type="text/javascript" src="script.js"></script>
        <div id="wrapper">
            <div id="content">
                <div id="top">
                    <img class="slide" src="1.png" style="width:100%">
                    <img class="slide" src="2.png" style="width:100%">
                </div>
                <div id="left">
                </div>
                <div id="middle">
                </div>
                <div id="right">
                </div>
            </div>
        </div>
    </body>
</html>

This is my CSS code:这是我的 CSS 代码：

.slide {
    display:none;
}

This is my Javascript code:这是我的 Javascript 代码：

slideshow();

function slideshow() {
    var index = 0;
    var i;
    var slides = document.getElementsByClassName("slide");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    index++;
    if (index > slides.length) {
        index = 1;
    }    
    slides[index-1].style.display = "block";  
    setTimeout(slideshow, 2000);
}

I think the problem is that the javascript cannot access the images when they are in the div.我认为问题是当它们在 div 中时 javascript 无法访问图像。

Answer 1

1. You are placing the <script> file before the slides. 1.您将<script>文件放在幻灯片之前。 So when your script is executed the first time, the markup does not yet exist in DOM .所以当你的脚本第一次被执行时，标记还不存在于DOM 。
Because your slides do not exist, after the initial for (which does nothing), you get to this line因为你的幻灯片不存在，在初始for （什么都不做）之后，你会看到这一行

slides[index-1].style.display = "block";

But slides[0] does not exist, so it doesn't have a .style property.但是slides[0]不存在，所以它没有.style属性。

2. You are reassigning the value of 0 to index each time you re-run the function, so it will always show the same slide: the first. 2.每次重新运行该函数时，您都将0的值重新分配给index ，因此它将始终显示相同的幻灯片：第一张。

(3.) You chose display as the method to show/hide your slides, which is not animatable . (3.)您选择display作为显示/隐藏幻灯片的方法，该方法不可动画。 Therefore, your slides will change abruptly, there's no possibility of transition.因此，你的幻灯片会突然改变，没有过渡的可能性。

(4.) In addition, just as a matter of personal choice, I prefer document.querySelectorAll('.slide') to document.getElementsByClassName("slide") . (4.)另外，就个人选择而言，我更喜欢document.querySelectorAll('.slide')到document.getElementsByClassName("slide") 。 I don't know exactly why.我不知道确切的原因。 Probably because it's shorter and maybe because it allows a more flexible selector syntax (classes, ids. attributes or any other valid css selector).可能是因为它更短，也可能是因为它允许更灵活的选择器语法（类、ID、属性或任何其他有效的css选择器）。

无法在幻灯片错误中读取未定义的属性“样式”

问题描述

1 个解决方案

解决方案1
6 已采纳 2017-02-02 19:49:23

无法在幻灯片错误中读取未定义的属性“样式”

问题描述

1 个解决方案

解决方案1 6 已采纳 2017-02-02 19:49:23

解决方案1
6 已采纳 2017-02-02 19:49:23