时间戳

首页 > 解决方案 > “使用香草 JS 的图像滑块”不起作用。调试时，我得到“无法读取未定义的类列表”的错误

javascript - “使用香草 JS 的图像滑块”不起作用。调试时，我得到“无法读取未定义的类列表”的错误

问题描述

let slidePosition = 0 
const slides = document.querySelectorAll(".slidecontainer .slide")
const totalSlides= slides.length

const nextButton= document.querySelector("#prev-btn")
const prevButton= document.querySelector("#next-btn")
console.log(nextButton, prevButton)
console.log (slides[0].classList)

function updateSlidePosition (){
slides[slidePosition].classList.remove("visible-slide")
slides[slidePosition++].classList.add("visible-slide")
}


function moveToNext(){
  if (slidePosition === totalSlides-1) {
    slidePosition = 0}
    else {slidePosition++}
    updateSlidePosition ()
}

function moveToPrev() {
  if (slidePosition < 0) {
    slidePosition === totalSlides-1}
    else {slidePosition--}
    updateSlidePosition ()
}

nextButton.addEventListener("click", moveToNext, false)
prevButton.addEventListener("click", moveToPrev, false)
/*Global Styles 
---------------------------*/
body {color:#1f1f2d; margin: 0px auto; font-family: 'Montserrat', sans-serif; overflow-y: auto; font-size:16px; overflow-x: auto; background-color: black;}
.borderstyle section {border-top: 9px solid #14141b;}

/*Intro  
---------------------------*/
header {background-color: black; margin-bottom: 2px;} 


/*Main Navigation
---------------------------*/



/*Events ------------ */
.events {background-color: black;}
.slidecontainer {position:relative;max-width:80%; max-height:50%;}
.slidecontainer .slide img{max-width:65%; max-height:40%; margin: 1%; box-shadow: 2px 2px 30px 2px #999999; border-radius: 10px;}

.slidecontainer .slide, .slide .slide-hidden {display:none;}

.slidecontainer .visible-slide{display: block;}


.slidecontainer .slider-actions {display:flex; position:absolute; justify-content: space-between; top:50%; transform: translateY(-65%); width: 65%;margin:1.2em;}
.slidecontainer button {display: flex; font-size: 1.5em; font-weight:bolder; border-radius: 40%; background-color: whitesmoke; font-family: serif; box-shadow: 2px 4px 15px 5px black; padding:2%;}
    /*Media Queries
---------------------------*/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add a relevant page title</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href= "D:\coding\CSS\raunaq-project\Stylestest.css" type="text/css">
    <script src="D:\coding\CSS\raunaq-project\newJStest.js" defer></script>

  </head>
  <body>
    <main>
      <!-- ***********************  MAIN NAVIGATION   *********************** -->
      
      <header>
           
       
      </header>

      <!-- ***********************  END OF MAIN NAVIGATION   *********************** -->

  
<section class = "events">
        <h1>We made the news!</h1> 
        <p>hover over the images to see us in action</p>    
        <div class="slidecontainer">
            <figure class="slide visible-slide">    <img src="placeholder-images\slider1.jpg" alt=""> </figure>
            <figure class="slide">  <img src="placeholder-images\slider2.jpg" alt=""> </figure>
            <figure class="slide">  <img src="placeholder-images\slider3.jpg" alt=""> </figure>
      <figure class="slide">    <img src="placeholder-images\slider4.jpg" alt=""> </figure>
      <div class= slider-actions>
    <button id="prev-btn"><</button>
    <button id="next-btn">></button>
      </div>
  </div>   
</section>  


    </main>
  </body>
</html>

我得到的错误是未定义 Const Slide.ClassList

我在 HTML 中添加了一些图像。

我为所有图像添加了一个“幻灯片”ID。我为要使其可见的幻灯片添加了“可见幻灯片”ID

我已将 display:none CSS 属性添加到要隐藏的图像 (#slide) 中，并在“visibile-slide”ID 中添加了 display:block 属性

我正在使用 JS 将可见幻灯片类设置为我想要显示的图像

标签： javascriptevent-listener

解决方案

推荐阅读