@Waldemar1010

Почему теряется контекст?

Почему при клике на кнопки в консоль выдает this.prev и this.next не функции, или вообще все неправильно сделано изначально?
window.onload = function() {

    var slider = new Slider({
        images: '.gallery-1 img',
        btnPrev: '.gallery-1 .buttons .prev',
        btnNext: '.gallery-1 .buttons .next',
        auto: false
    });
    

    function Slider(obj) {
        this.images = document.querySelectorAll(obj.images);
        this.btnPrev = document.querySelector(obj.btnPrev);
        this.btnNext = document.querySelector(obj.btnNext);;
        this.auto = obj.auto;

        let i = 0;
        
       this.prev = function() {
            this.images[i].classList.remove('showed');
            i--;
            if(i < 0) {
                i = this.images.length - 1;
            }
            this.images[i].classList.add('showed');
        }
        
        this.next = function() {
            console.log(this.images);
            this.images[i].classList.remove('showed');
            i++;
            if(i === this.images.length - 1) {
                i = 0;
            }
            this.images[i].classList.add('showed');
        }


        this.btnPrev.onclick = function() {
            this.prev();
        }

        this.btnNext.onclick = function() {
            this.next();
        }
    }

 console.log(slider);

}


5ee7c10343e62224697608.png
  • Вопрос задан
  • 131 просмотр
Решения вопроса 2
dimovich85
@dimovich85 Куратор тега JavaScript
Уроки по JS - https://t.me/school_ofpery
Недавно отвечал на очень похожий вопрос.
Ответ написан
space2pacman
@space2pacman
Просто царь.
this.btnPrev.onclick = (function() {
    this.prev();
}).bind(this)


onclick это собитие и функция записанная в это событие имеет другой контекст (элемент на котором срабатывает событие)
bind'ить надо
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы