JavaScript carousel / slider error

Rocking Education спросил: 10 мая 2018 в 04:14 в: javascript

Я работал над личным проектом создания слайдера с использованием чистого javascript. Но код js не работает. Когда я нажимаю на следующую кнопку, на консоли отображается ошибка, следующая () не является функцией. То же, что и в предыдущей кнопке, говорит, что prev () не определен. Я пробовал все, что мог, но я не смог найти ответ. Я сбиваю с толку, что я объявил обе функции, но щелкнул, я получаю сообщение об ошибке, что функции не являются функциями.

main.js: 38 Uncaught TypeError: next не является элементом HTML элемента. (main.js: 38)

Код JS:

var next = document.getElementById("next");
var prev = document.getElementById("prev");
var ulist = document.getElementsByTagName("ul").lastChild;
var ulist1 = document.getElementsByTagName("ul").firstChild;
var slides = document.querySelectorAll("li");for(var i=0; i<3; i++){
slides[i].style.display = 'none';
}slides[0].classList.add("active");document.getElementsByClassName("active")[0].style.display = "block";function next() {
    document.getElementsByClassName("active")[0].classList.add("oldActive");
    document.getElementsByClassName("active")[0].classList.remove("active");
    if(Object.is(document.getElementsByClassName("oldActive")[0]) , ulist){
        slides[0].classList.add("active");
    }
    else{
        document.getElementsByClassName("oldActive")[0].nextElementSibling.classList.add("active");
    }
}function prev() {
    document.getElementsByClassName("active")[0].classList.add("oldActive");
    document.getElementsByClassName("active")[0].classList.remove("active");
    if(Object.is(document.getElementsByClassName("oldActive")[0]) , ulist1){
        slides[2].classList.add("active");
    }
    else{
        document.getElementsByClassName("oldActive")[0].previousElementSibling.classList.add("active");
    }
}next.addEventListener('click' , function() {
    next();
});prev.addEventListener('click' , function() {
    prev();
});

Код HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image/Content Slider with Pure JS</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
    <header>
        <h1>A Responsive Image/Content Slider</h1>
        <p>It is made with HTML5, CSS3 and JavaScript</p>
    </header>
    <div class="left">
    <h1><i class="fas fa-arrow-left" id="prev"></i></h1>
    </div>
    <main>        <div class="slider">
            <ul class="slides" id="slidelist">
                <li class="slide 1" name="slideo"><img src="images/hero_bg.jpeg" alt=""></li>
                <li class="slide 2" name="slideo"><img src="images/hero_bg1.jpeg" alt=""></li>
                <li class="slide 3" name="slideo"><img src="images/hero_bg1.jpeg" alt=""></li>
            </ul>               
        </div>    </main>
    <div class="right">
    <h1><i class="fas fa-arrow-right"  id="next"></i></h1>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

2 ответа

Есть решение
Hiteshdua1 ответил: 10 мая 2018 в 04:26

Рабочий скрипт: https://jsfiddle.net/o61pbg0z/

Что было связано с тем, что

var next = document.getElementById("next");
var prev = document.getElementById("prev");

И

function next() {
    document.getElementsByClassName("active")[0].classList.add("oldActive");
    document.getElementsByClassName("active")[0].classList.remove("active");
    if(Object.is(document.getElementsByClassName("oldActive")[0]) , ulist){
        slides[0].classList.add("active");
    }
    else{
        document.getElementsByClassName("oldActive")[0].nextElementSibling.classList.add("active");
    }
}function prev() {
    document.getElementsByClassName("active")[0].classList.add("oldActive");
    document.getElementsByClassName("active")[0].classList.remove("active");
    if(Object.is(document.getElementsByClassName("oldActive")[0]) , ulist1){
        slides[2].classList.add("active");
    }
    else{
        document.getElementsByClassName("oldActive")[0].previousElementSibling.classList.add("active");
    }
}

Поэтому попробуйте дать им обоим имена.

Причина сбоя: В JavaScript как объявление функции, так и объявления переменных поднимаются в начало функции, если они определены в функции, или верхней части глобального контекста, если вне функции. И объявление функции имеет приоритет над объявлениями переменных (но не над назначением переменной).

Reda ответил: 10 мая 2018 в 04:19

У вас есть дубликаты имен как next, так и prev - один как элемент, а затем как функция. Переименуйте один из двух в другое, чтобы избежать конфликта имен.

Например:

var next = document.getElementById("next");
var prev = document.getElementById("prev");

var nextEl = document.getElementById("next");
var prevEl = document.getElementById("prev");

Дополнительное видео по вопросу: JavaScript carousel / slider error

Simple JavaScript Slideshow In 5 Minutes

How To Create An Image Slider In HTML, CSS & Javascript

Full Screen Image Slider With HTML, CSS & JS