未捕获的类型错误：无法读取 carroussel 未定义的属性“样式”

Question

我在第 12 行收到“Uncaught TypeError: Cannot read property 'style' of undefined”我不知道为什么

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 作为一个数组，并且您假设数组元素是一个具有属性样式的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"; 
}

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

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