Question

我在第12行收到“未捕获的TypeError：无法读取未定义的属性'style'”，我不知道为什么

class Slider {
duration = 0;
currentSlide = 0;
slides = document.getElementsByClassName("slide");
constructor() {
    this.initSlide();  
}

initSlide() {
    var i;
    for (i = 0; i < this.slides.length; i++) {
        this.currentSlide[i].style.display = "none";  
    }
    this.currentSlide++;
    if (this.currentSlide > this.slides.length) {
        this.currentSlide = 1
    }    
    this.slides[this.currentSlide - 1].style.display = "block"; 
    setTimeout(this.initSlide, 3000); 
}

}

Answer 1

在initSlide方法中，您尝试在元素列表中进行迭代，这些元素的类名称为slide。

在循环中，您将this.currentSlide用作Array，并假定array元素是具有属性样式的html元素。但是，您将属性currentSlide声明为数字类型，并且将值分配为0。不能迭代0或数字类型。

正确的迭代应该是：

for (i = 0; i < this.slides.length; i++) {
  this.slides[i].style.display = "none";
}

但是我认为，这不是您想要的，对，但是它可以解决您的错误。

编辑：为避免出现以下所有错误，您必须首先检查页面上是否有幻灯片：

if(this.slides.length >= 1) {
  this.slides[this.currentSlide - 1].style.display = "block"; 
}

并使用箭头函数，而不是函数本身，以避免您的内部此引用指向窗口对象，而是指向生成的对象。

setTimeout(() => this.initSlide(), 3000);

Uncaught TypeError：无法读取carroussel的undefined属性“ style”

1 个答案: