Что надо исправить, что бы заработал самописный слайдер на js?

Question

[KononovD]

Здравствуйте, имеем следующий код
https://codepen.io/Kononov_D/pen/GeWBbN?editors=1010

Захотел я практики js, решил писать свой слайдер, кривенько-косенько, но написал, довольный сидел)
потом я подумал: "а что, если я хочу 2 или больше слайдеров к себе на страницу? копипастить код?"
Я призадумался и решил положить свой слайдер в класс, что бы потом работать с экземплярами этого класса.

И вот в чем проблема:
создание экземпляра, передача параметров, инициализация слайдера - все хорошо...
а потом, из экземпляра как будто удаляются поля, которые я создавал в конструкторе и в консоли ошибки рода "Cannot read property 'click' of undefined"
Причем, навесить событие на кнопки - я могу, они есть, а когда дело доходит до клика на эти кнопки - в переменных их уже нет... что делать?

В codePen внизу так же есть рабочий, не ООП(функционалный) варинат.

кстати, как передавать объект в конструктор?)

велика вероятность, что я где-то с контекстом вызова намудрил, но если убрать this. - ругается, что переменная не найдена..

Answer 1

[Stockholm Syndrome]

когда навешиваете обработчики на элементы, например, здесь:

img.addEventListener("mouseover", this.stopAutoplay);

теряется контекст, поэтому нужно так:

img.addEventListener("mouseover", this.stopAutoplay.bind(this));

здесь он тоже теряется

this.autoplayInterval = setInterval(function() {
  this.sliderNext.click();
}, this.sliderDelay);

поэтому либо используйте стрелочную функцию:

this.autoplayInterval = setInterval(() => {
  this.sliderNext.click();
}, this.sliderDelay);

либо опять же метод bind:

this.autoplayInterval = setInterval(function() {
  this.sliderNext.click();
}.bind(this), this.sliderDelay);

Comments

[KononovD]

ну я так и думал, что с контекстом проблема)
Спасибо большое)