我的 classList .add 函数有什么问题？答案

【问题标题】：What is wrong with my classList .add function?我的 classList .add 函数有什么问题？
【发布时间】：2026-02-09 07:50:01
【问题描述】：

我正在制作视频滑块背景，但我的 用于视频滑块导航的 Javacript 不起作用（当我单击按钮时，视频不会改变）。控制台宣布错误为“无法读取未定义的属性 'classList' 在 sliderNav" 。我不知道怎么了...任何人都知道请帮助我！谢谢你这么多！

这是我的 html 和 JS：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website Landing Page - With Background Video Slider | Travel</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>

<body>

    <header>
        <a href="#" class="brand">Travel</a>
        <div class="menu-btn "></div>
        <div class="navigation">
            <div class="navigation-items">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Explore</a>
                <a href="#">Gallery</a>
                <a href="#">Contact</a>
            </div>
        </div>
    </header>

    <section class="home">
        <video class="video-slide" src="vid3.mp4" autoplay muted loop></video>
        <video class="video-slide" src="vid2.mp4" autoplay muted loop></video>
        <video class="video-slide" src="vid1.mp4" autoplay muted loop></video>
        <video class="video-slide" src="vid4.mp4" autoplay muted loop></video>

        <div class="content active">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="#">Read More</a>
        </div>
        <div class="content">
            <h1>Camping.<br><span>Enjoy</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="#">Read More</a>
        </div>
        <div class="content">
            <h1>Adventures.<br><span>Off Road</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="#">Read More</a>
        </div>
        <div class="content">
            <h1>Road Trip.<br><span>Together</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="#">Read More</a>
        </div>
        <div class="content">
            <h1>Feel Nature.<br><span>Relax</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="#">Read More</a>
        </div>
        <div class="media-icons">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
        </div>
        <div class="slider-navigation">
            <div class="nav-btn"></div>
            <div class="nav-btn"></div>
            <div class="nav-btn"></div>
            <div class="nav-btn"></div>
            
        </div>
    </section>
    <script type="text/javascript">
        const menuBtn = document.querySelector('.menu-btn')
        const navigation = document.querySelector('.navigation')

        menuBtn.addEventListener('click', () => {
                menuBtn.classList.toggle('active')
                navigation.classList.toggle('active')
            })
            ////Javacript for video slider navigation
        const btns = document.querySelectorAll('.nav-btn')
        const slides = document.querySelectorAll('.video-slide')

        var sliderNav = function(manual) {
            btns.forEach((btn) => {
                btn.classList.remove('active')
            })
            slides.forEach((slide) => {
                slide.classList.remove('active')
            })

            btns[manual].classList.add("active")
            slides[manual].classList.add("active")
        }

        btns.forEach((btn, i) => {
            btn.addEventListener('click', () => {
                sliderNav(i)
            })
        })
    </script>


</body>

</html>

这是我的 CSS：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

header {
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 200px;
    transition: 0.5s ease;
}

header .brand {
    color: #fff;
    font-size: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

header .navigation {
    position: relative;
}

header .navigation .navigation-items a {
    position: relative;
    color: #fff;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    margin-left: 30px;
    transition: 0.3s ease;
}

header .navigation .navigation-items a:before {
    content: '';
    position: absolute;
    background: #fff;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
}

header .navigation .navigation-items a:hover:before {
    width: 100%;
}

section {
    padding: 100px 200px;
}

.home {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #ED2CC4;
}

.home:before {
    z-index: 777;
    content: '';
    position: absolute;
    background: rgba(3, 96, 251, 0.3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.home .content {
    z-index: 888;
    color: #fff;
    width: 70%;
    margin-top: 50px;
    display: none;
}

.home .content.active {
    display: block;
}

.home .content h1 {
    font-size: 4em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 75px;
    margin-bottom: 40px;
}

.home .content h1 span {
    font-size: 1.2em;
    font-weight: 600;
}

.home .content p {
    margin-bottom: 65px;
}

.home .content a {
    background: #fff;
    padding: 15px 35px;
    color: #1680AC;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    border-radius: 2px;
}

.home .media-icons {
    z-index: 888;
    position: absolute;
    right: 30px;
    display: flex;
    flex-direction: column;
    transition: 0.5s ease;
}

.home .media-icons a {
    color: #fff;
    font-size: 1.6em;
    transition: 0.3s ease;
}

.home .media-icons a:not(:last-child) {
    margin-bottom: 20px;
}

.home .media-icons a:hover {
    transform: scale(1.3);
}

.home video {
    z-index: 000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-navigation {
    z-index: 888;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(80px);
    margin-bottom: 12px;
}

.slider-navigation .nav-btn {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    transition: 0.3s ease;
}

.slider-navigation .nav-btn.active {
    background: #2696E9;
}

.slider-navigation .nav-btn:not(:last-child) {
    margin-right: 20px;
}

.slider-navigation .nav-btn:hover {
    transform: scale(1.2);
}

.video-slide {
    position: absolute;
    width: 100%;
    clip-path: circle(150% at 0 50%);
}

.video-slide.active {
    clip-path: circle(150% at 0 50%);
    transition: 2s ease;
    transition-property: clip-path;
}

@media (max-width: 1040px) {
    header {
        padding: 12px 20px;
    }
    section {
        padding: 100px 20px;
    }
    .home .media-icons {
        right: 15px;
    }
    header .navigation {
        display: none;
    }
    header .navigation.active {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(1, 1, 1, 0.5);
    }
    header .navigation .navigation-items a {
        color: #222;
        font-size: 1.2em;
        margin: 20px;
    }
    header .navigation .navigation-items a:before {
        background: #222;
        height: 5px;
    }
    header .navigation.active .navigation-items {
        background: #fff;
        width: 600px;
        max-width: 600px;
        margin: 20px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 5px;
        box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
    }
    .menu-btn {
        background: url(menu.png)no-repeat;
        background-size: 30px;
        background-position: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: 0.3s ease;
    }
    .menu-btn.active {
        z-index: 999;
        background: url(close.png)no-repeat;
        background-size: 25px;
        background-position: center;
        transition: 0.3s ease;
    }
}

@media (max-width: 560px) {
    .home .content h1 {
        font-size: 3em;
        line-height: 60px;
    }
}

【问题讨论】：

标签： javascript foreach navbar add addeventlistener

【解决方案1】：

您的btns 数组包含五个元素，而您的slides 数组仅包含四个元素，因此当单击最后一个按钮时，您会访问未定义的幻灯片[4]。

const btns = document.querySelectorAll('.nav-btn')
const slides = document.querySelectorAll('.video-slide')

您需要添加另一个视频元素或从页面中删除一个按钮：

<video class="video-slide" src="vid3.mp4" autoplay muted loop></video>
<video class="video-slide" src="vid2.mp4" autoplay muted loop></video>
<video class="video-slide" src="vid1.mp4" autoplay muted loop></video>
<video class="video-slide" src="vid4.mp4" autoplay muted loop></video>

<div class="slider-navigation">
     <div class="nav-btn"></div>
     <div class="nav-btn"></div>
     <div class="nav-btn"></div>
     <div class="nav-btn"></div>
     <div class="nav-btn"></div>
</div>

【讨论】：

是的，我删除了一个 nav-btn 但一个视频静止不动，它不会更改为另一个视频...这次控制台上没有错误