Что бы было понятнее моя проблема, я напишу сначала 1 вариант кода а потом второй. (Java Script) 1 Код:
var img = document.querySelectorAll(".slider__li"); //Массив классов с картинками (не активные)
var btn = document.querySelectorAll(".slider__btn"); //Массив классов с кнопками (не активные)
var page = document.querySelectorAll(".slider_page_li"); //Массив 2 кнопок
var index = 0;
var interval = null;
function moveInterval(){ //Переход картинок и кнопок
prevClass(img, index, "slider__li"); //Начальная картинка
prevClass(page, index, "slider_page_li"); //Начальная кнопка
index++; //Увеличиваем index каждый раз вызывая эту функцию
if(index >= img.length){
index = 0;
}
nextClass(img, index, "slider__li slider__li_active"); //Меняем картинку под индексом на активную.
nextClass(page, index, "slider_page_li slider_page_li_active"); //Меняем кнопку под индексом на активную.
}
function prevClass(obj, index, strClass){ //Передаем obj, индекс, и strClass.
obj[index].className = strClass;
}
function nextClass(obj, index, strClass){ //Функция для изменение название класса передаваемого элемента под индексом
obj[index].className = strClass;
}
function startSlide(time){ //Функция по моему для старта 'moveInterval' по заданому времени
interval = setInterval(moveInterval , time);
}
startSlide(2000); //Вызываем 'startSlide' и каждый 2 секунды вызывается 'moveInterval'
Java Script недавно начал изучать.
Как вы поняли, я вызываю функцию каждый 2 секунды, которая в свою очередь увеличивает index и меняет название класса элемента.
2 Код:
var img = document.querySelectorAll(".slider__li");
var btn = document.querySelectorAll(".slider__btn");
var page = document.querySelectorAll(".slider_page_li");
var index = 0;
var interval = null;
function target(){
prevClass(img, index, "slider__li"); //Начальные значения элемента img.
prevClass(page, index, "slider_page_li"); //Начальные значения элемента page.
if(this.dataset.target === "next"){ //Если элемент имеет data_target="next то:
index++; //Увеличивает index
if(index >= img.length){ // проверяет больше или равно максимальному числу картинок
index = 0; // Если так то обнуляет index
}
}else if(this.dataset.target === "prev"){ ////Если элемент имеет data_target="prev" то:
index--; //Убавляет index
if(index = 0){ //Если index = 0
index = img.length - 1; //По моему по этой строки мы делаем начальный index
}
}else{
index = parseInt(this.dataset.target);
}
nextClass(img, index, "slider__li slider__li_active"); //ТУТ ВОЗНИКАЕТ ОШИБКА
nextClass(page, index, "slider_page_li slider_page_li_active"); //ТУТ ВОЗНИКАЕТ ОШИБКА
}
function prevClass(obj, index, strClass){
obj[index].className = strClass; //ТУТ ВОЗНИКАЕТ ОШИБКА: Uncaught TypeError: Cannot set property 'className' of undefined
}
function nextClass(obj, index, strClass){
obj[index].className = strClass; //ТУТ ВОЗНИКАЕТ ОШИБКА: Uncaught TypeError: Cannot set property 'className' of undefined
}
Array.prototype.map.call(page, function(e){ //Вызов функции target при клики на page
e.addEventListener("click", target);
});
Array.prototype.map.call(btn, function(e){//Вызов функции target при клики на btn
e.addEventListener("click", target);
});
В общем то в 2 коде возникает ошибка: Uncaught TypeError: Cannot set property 'className' of undefined (Если что я подметил где именно в комментариях).
И как я понял, что ли не существует... Я вообще не понимаю! Прошу помощи! Если нужно что то дополнить то напишите!
img
, если кнопок только две?obj
,index
. Очевидно, проблема в том что obj[index] не существует, и значит либо у вас нет элементов с подходящим классом иimg
хранит пустой массив, либо вы устанавливаете неверный индекс.