为什么我的 javascript 幻灯片不起作用并导致“无法设置未定义的属性（设置'className'）？

Question

我正在尝试在 javascript 中创建幻灯片，按“下一张”和“上一张”按钮应该带您进入下一张和上一张幻灯片。

当我运行代码时，幻灯片不起作用，相反，新的“幻灯片”最终出现在现有幻灯片的下方。 除此之外，还有一个错误，“无法设置未定义的属性（设置'className'）”。

这是我的html：

<div id="slideshow_container">
<!-- This is the start of the slideshow--> 
<div id="bg" class="slide_active">  <!-- First slideshow element -->
  <div id="info">
    <br><br>
    <section class="who"> 
      <h2>
        Who are we?
      </h2> <br>
      <p>
        We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here!
      </p>
    </section>
    <br><br>
    <section class="who">
      <h2>
        Our Story
      </h2>
    </section>
     <br><br> 
    <section class="who">
      <h2>
        Our Misssion
      </h2>
      <br>
      <p>
        To unite the Bangladeshi community in Oman
      </p>
    </section>
    <br><br>
    <section class="who">
      <h2>
        Our Vision
      </h2>
      <br>
      <p>
        To reach out to all Bengali people living in Oman.
      </p>
    </section>
  </div>
  <a id="prev" onclick="Prev_Slide(1)">Previous</a>
  <a id="next" onclick="Next_Slide(1)">Next</a>
</div> 
<div id="message_div" class="slide"><!-- Second slideshow element -->
  <br><br>
  <h2 id="message">
    Message from our CEO
  </h2>
  <p id="belief">
    Our CEO believes....
  </p>
</div>
<div id="members" class="slide">
  <h2 id="member_head">
    Our members...
  </h2>
  
    
</div> 

这是我的CSS：

#img{
  width: 100%;
  height: 100%;
  object-fit: fill;
}


#info{
  width: 600px;
  position: absolute;
  left: 500px;
  background-color: red;
}

.who{ 
  height: auto;
  text-align: center;
  font-family: Comic Sans MS;
}

h2{
    font-weight: bold;
}

#bg{
  background-color: green;
  width:1600px;
  height: 619px;
}

#prev{
  position:relative;
  top:575px;
  left:10px;
  font-family: Segoe Print;
  font-weight: bold;
  color: white;

}

#next{
  position:relative;
  top:575px;
  left:1400px;
  font-family: Segoe Print;
  font-weight: bold;
  color: white;
}

#slideshow_container{
  width: 1600px;
  height: 619px;
  position:relative;
}

.slide{
  display:none;
  object-fit: fill;
}

.slide_active{
  display:block;
}

#message_div{
  text-align: center;
}

#belief{
  text-align: center;
}

最后，这是我的 javascript：

let Slide_number = 1;
show_slides(Slide_number);

function Next_Slide(n){
  show_slides(Slide_number += n);
}

function Prev_Slide(n){
  show_slides(Slide_number -= n);
}

/* Literally the slide number(not indexed) */

function show_slides(n){
  let i;
  let slides = document.getElementsByClassName("slide");
  if (n>slides.length){
    Slide_number = 1;
  }
  if (n<1){
    Slide_number = slides.length
  }
  for(i=0; i<slides.length; i++){
    slides[i].className = "slide";
  }
  slides[Slide_number-1].className = "slide_active";  
}

有人可以帮我解决我的方法到底有什么问题吗？ 我不明白这个问题。 我正在使用引导程序，但我认为这不会过多地干扰我的代码。

Answer 1

每次单击锚标记时，您都在替换 sildes 的类名。 您需要加法赋值运算符+=和一个空格。 因此，您可以向该元素添加类。

---

您还可以使用classList.add()方法。

slides[Slide_number - 1].classList.add("slide_active");

---

 let Slide_number = 1; show_slides(Slide_number); function Next_Slide(n) { show_slides(Slide_number += n); } function Prev_Slide(n) { show_slides(Slide_number -= n); } function show_slides(n) { let slides = document.getElementsByClassName("slide"); if (n > slides.length) Slide_number = 1; if (n < 1) Slide_number = slides.length; console.log(Slide_number); for (let i = 0; i < slides.length; i++) { slides[i].className = "slide"; } slides[Slide_number - 1].className += " slide_active"; }

 #img { width: 100%; height: 100%; object-fit: fill; } #info { width: 600px; position: absolute; left: 500px; background-color: red; } .who { height: auto; text-align: center; font-family: Comic Sans MS; } h2 { font-weight: bold; } #bg { background-color: green; width: 1600px; height: 619px; } #prev { position: relative; top: 575px; left: 10px; font-family: Segoe Print; font-weight: bold; color: white; } #next { position: relative; top: 575px; left: 1400px; font-family: Segoe Print; font-weight: bold; color: white; } #slideshow_container { width: 1600px; height: 619px; position: relative; } .slide { display: none; object-fit: fill; } .slide_active { display: block; } #message_div { text-align: center; } #belief { text-align: center; }

 <div id="slideshow_container"> <!-- This is the start of the slideshow--> <div id="bg" class="slide_active"> <!-- First slideshow element --> <div id="info"> <br><br> <section class="who"> <h2> Who are we? </h2> <br> <p> We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here! </p> </section> <br><br> <section class="who"> <h2> Our Story </h2> </section> <br><br> <section class="who"> <h2> Our Misssion </h2> <br> <p> To unite the Bangladeshi community in Oman </p> </section> <br><br> <section class="who"> <h2> Our Vision </h2> <br> <p> To reach out to all Bengali people living in Oman. </p> </section> </div> <a id="prev" onclick="Prev_Slide(1)">Previous</a> <a id="next" onclick="Next_Slide(1)">Next</a> </div> <div id="message_div" class="slide"> <!-- Second slideshow element --> <br><br> <h2 id="message"> Message from our CEO </h2> <p id="belief"> Our CEO believes.... </p> </div> <div id="members" class="slide"> <h2 id="member_head"> Our members... </h2> </div>

Answer 2

将您的脚本放在正文标记的末尾之前。 如果没有，您将收到未定义的消息。 为什么？ 因为到那时您的 DOM 已经加载并准备好进行操作，所以您将可以访问您希望操作的任何元素。

至于您在其他下显示的幻灯片，这是可行的解决方案。 用JS添加类名时，如果要替换现有的类名可以使用= ，但是如果要添加到现有的类中，则需要在其前面保留一个空格并使用+= ，这样就不会覆盖已经存在的类，您将拥有class="existingclass addedclass" 。 还修改了css，可以看顶部的评论。 此外，我从#bg div 中取出下一个和上一个按钮并将其直接放在容器中，因为它本身就是一张幻灯片，所以您的下一张幻灯片将无法看到这些按钮。 就这样。 您可以直接运行代码来亲自查看。

 let Slide_number = 1; show_slides(Slide_number); function Next_Slide(n){ show_slides(Slide_number += n); } function Prev_Slide(n){ show_slides(Slide_number -= n); } /* Literally the slide number(not indexed) */ function show_slides(n){ let i; let slides = document.getElementsByClassName("slide"); if (n>slides.length){ Slide_number = 1; } if (n<1){ Slide_number = slides.length } for(i=0; i<slides.length; i++){ slides[i].className = "slide"; } // keep space before slide_active and use += instead slides[Slide_number-1].className += " slide_active"; }

 /* gave slide container a green background so that you will be able to see white next and prev text, also removed style for #bg since it is a slide itself */ #img{ width: 100%; height: 100%; object-fit: fill; } #info{ width: 600px; position: absolute; left: 500px; background-color: red; } .who{ height: auto; text-align: center; font-family: Comic Sans MS; } h2{ font-weight: bold; } #prev{ position:relative; top:575px; left:10px; font-family: Segoe Print; font-weight: bold; color: white; } #next{ position:relative; top:575px; left:1400px; font-family: Segoe Print; font-weight: bold; color: white; } #slideshow_container{ width: 1600px; height: 619px; position:relative; background-color: green; } .slide { display:none; object-fit: fill; } .slide_active{ display:block; } #message_div{ text-align: center; } #belief{ text-align: center; }

 <div id="slideshow_container"> <a id="prev" onclick="Prev_Slide(1)">Previous</a> <a id="next" onclick="Next_Slide(1)">Next</a> <!-- This is the start of the slideshow--> <div id="bg" class="slide"> <!-- First slideshow element --> <div id="info"> <br><br> <section class="who"> <h2> Who are we? </h2> <br> <p> We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here! </p> </section> <br><br> <section class="who"> <h2> Our Story </h2> </section> <br><br> <section class="who"> <h2> Our Misssion </h2> <br> <p> To unite the Bangladeshi community in Oman </p> </section> <br><br> <section class="who"> <h2> Our Vision </h2> <br> <p> To reach out to all Bengali people living in Oman. </p> </section> </div> </div> <div id="message_div" class="slide"><!-- Second slideshow element --> <br><br> <h2 id="message"> Message from our CEO </h2> <p id="belief"> Our CEO believes.... </p> </div> <div id="members" class="slide"> <h2 id="member_head"> Our members... </h2> </div>