onclick для div в методе класса js

237
01 июля 2017, 13:04

Здравствуйте, прошу помощи, объяснений, примеров..) Пишу слайдер своими силами для сайта (намеренно не использую библиотеки) на чистом js по возможности универсальный.

Решил сделать прототип класса для слайдера, их несколько на странице, вроде бы все нормально работает, но не могу повесить (или понять почему не работает) событие onclick на div при котором будет отрабатываться метод экземпляра класса - scrollLeft(arrg). Этот же метод используется и в другом методе - enableAutoScroll(), который работает! Должно быть дело в оформлении кода.

В общем разметка такая:

<div class="slider relation" id="slider-1">        // Слайдер
    <div class="relation_ratio ratio-4x1"></div>      // Адаптива
    <div class="relation_content">                    // Контент
        <div class="slider_btn slider_left"></div>        // Кнопка - влево
        <div class="slides_line">                         // Пикчи
            // <a>image</a>  
            //     ...
        </div>
        <div class="slider_btn slider_right"></div>       // Кнопка - вправо
    </div>
</div>

Класс и проблемный метод setButtonsEvent:

Slider = function(id_name) {
    this.id_name = id_name;
    this.auto_scroll = 0;
    this.offset = 0;
    this.timeoutId = undefined;
    this.number_of_childes = this.getSlidesLine().children.length;
    this.getSlidesLine().style.left = this.offset + "%";
    this.setButtonsEvent();
}
Slider.prototype.setButtonsEvent = function() {
    this.getLeftButton().addEventListener('click', this.scrollLeft(3));
    //    Property 'handleEvent' is not callable.
    this.getRightButton().onclick = this.scrollRight();
    //    Не работает
    //    Пробовал просто "this.scrollRight;" - тогда при загрузке страницы просто выполняется эта функция (прокручивает слайдер один раз) и по нажатию также ничего не происходит. Но при этом сообщает, что "this.getSlidesLine is not a function"
    return this;
}

В классе присутствуют методы для получения объектов, типа:

Slider.prototype.getSlidesLine = function() {
    return document.querySelector("#" + this.id_name + " > .relation_content > .slides_line");
};
Slider.prototype.getLeftButton = function() {
    return document.querySelector("#" + this.id_name + " > .relation_content > .slider_btn.slider_left");
};
Slider.prototype.getRightButton = function() {
    return document.querySelector("#" + this.id_name + " > .relation_content > .slider_btn.slider_right");
};

ну и сам scrollLeft:

Slider.prototype.scrollLeft = function(divider = 3) {
    if(Math.abs(this.offset) / 100 >= this.number_of_childes / divider - 1) this.offset = 0;
    else this.offset -= 100;
    this.getSlidesLine().style.left = this.offset + "%";
    return this;
};

Так же буду рад замечаниям по поводу оформления строк кода.

READ ALSO
Блоки одинаковой высоты

Блоки одинаковой высоты

Если заполняется один из блоков, то оба блока принимают наибольшую высотуВариант с фиксированной высотой не подойдет

262
Как добавить атрибут defer всем скриптам при загрузке страницы

Как добавить атрибут defer всем скриптам при загрузке страницы

Нужно добавить атрибут defer при загрузке страницы всем <script>-амТаким образом хочу ускорить загрузку страницы

285
Не срабатывает событие click [дубликат]

Не срабатывает событие click [дубликат]

На данный вопрос уже ответили:

202
Как изменить стиль элементу на javascript?

Как изменить стиль элементу на javascript?

Хочу поменять стиль элементу на странице, который соответствует выбранному (у них одинаковый параметр idEv)Пробую так:

248