Why does my javascript slideshow not work and result in a "Cannot set properties of undefined(s-CodePudding

I am trying to create a slideshow in javascript, where pressing the 'next' and 'previous' buttons should take you to the next and previous slides.

When I run the code, the slideshow doesn't work, instead, the new "slides" end up coming below the existing slide. Apart from this, there is an error, "Cannot set properties of undefined (setting 'className')".

Here is my html:

<div id="slideshow_container">
<!-- This is the start of the slideshow--> 
<div id="bg" >  <!-- First slideshow element -->
  <div id="info">
    <br><br>
    <section > 
      <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 >
      <h2>
        Our Story
      </h2>
    </section>
     <br><br> 
    <section >
      <h2>
        Our Misssion
      </h2>
      <br>
      <p>
        To unite the Bangladeshi community in Oman
      </p>
    </section>
    <br><br>
    <section >
      <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" ><!-- Second slideshow element -->
  <br><br>
  <h2 id="message">
    Message from our CEO
  </h2>
  <p id="belief">
    Our CEO believes....
  </p>
</div>
<div id="members" >
  <h2 id="member_head">
    Our members...
  </h2>
  
    
</div>

Here is my 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;
}

And finally, here is my 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";  
}

Can someone please help me out with exactly what is wrong with my approach? I do not understand the issue. I am using bootstrap, but I don't think that would interfere with my code much.

CodePudding user response：

You are replacing the classnames of the sildes every time you click on anchor tag. You need addition assignment operator = and a space for it. So you can add class to that element.

You can also use classList.add() method.

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" >
    <!-- First slideshow element -->
    <div id="info">
      <br><br>
      <section >
        <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 >
        <h2>
          Our Story
        </h2>
      </section>
      <br><br>
      <section >
        <h2>
          Our Misssion
        </h2>
        <br>
        <p>
          To unite the Bangladeshi community in Oman
        </p>
      </section>
      <br><br>
      <section >
        <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" >
    <!-- Second slideshow element -->
    <br><br>
    <h2 id="message">
      Message from our CEO
    </h2>
    <p id="belief">
      Our CEO believes....
    </p>
  </div>
  <div id="members" >
    <h2 id="member_head">
      Our members...
    </h2>


  </div>

CodePudding user response：

Put your script just before the end of your body tag. If not you will get the undefined message. Why? Because your by that time DOM is already loaded and ready for manipulation so you will have access to any element you wish to manipulate.

As for your slide showing under other, here is the working solution. When you add a classname with JS, if you want to replace an existing classname you can use = but if you want to add to an existing class, you need to keep a space before it and use = so that you don't overwrite the already existing class and you will have . Also modified css, you can read the comment at the top. Also I have taken out next and previous button out of #bg div and placed it inside container directly, since it is a slide itself, your next slide won't be able to see those buttons. That's all. You can run the code directly to see it for yourself.

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" >  <!-- First slideshow element -->
          <div id="info">
            <br><br>
            <section > 
              <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 >
              <h2>
                Our Story
              </h2>
            </section>
             <br><br> 
            <section >
              <h2>
                Our Misssion
              </h2>
              <br>
              <p>
                To unite the Bangladeshi community in Oman
              </p>
            </section>
            <br><br>
            <section >
              <h2>
                Our Vision
              </h2>
              <br>
              <p>
                To reach out to all Bengali people living in Oman.
              </p>
            </section>
          </div>
        </div> 
        <div id="message_div" ><!-- Second slideshow element -->
          <br><br>
          <h2 id="message">
            Message from our CEO
          </h2>
          <p id="belief">
            Our CEO believes....
          </p>
        </div>
        <div id="members" >
          <h2 id="member_head">
            Our members...
          </h2>
          
            
        </div>