Uncaught TypeError: не удается прочитать свойство «стиль» неопределенного для карусели

я получаю «Uncaught TypeError: не могу прочитать свойство« стиль »неопределенного» в строке 12, я не знаю, почему

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

}

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
396
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

да, спасибо, но теперь у меня такая же проблема с длиной в предыдущей строке, извините, я только начал изучать javascript 3 недели назад, я просто пытаюсь понять.

iceson 22.05.2019 14:18

@iceson Чтобы избежать всех последующих и возможных ошибок, смотрите мое редактирование.

Marcel Wagner 22.05.2019 14:42

Большое спасибо, что нашли время, чтобы объяснить мне. карусель работает.

iceson 22.05.2019 15:05

@iceson Можете ли вы тогда отметить мой ответ как решение? Или это было другое, что помогло вам?

Marcel Wagner 22.05.2019 18:06

Другие вопросы по теме