How to repeatedly loop through divs

Question

I have a script which changes the div display property on click on Next or Previous buttons. I am able to click on Next and see the next div or click on Previous to see the previous one; however, once it reaches to the end the classList becomes undefined or null. What I want to do is, when the page is loaded for the firs time, I want the user to click on Next until the end and then to the first div like in a loop. Also, if the user clicks on Previous from the first page, then I would want the user to see the last div. Any help is appreciated. Thanks! Below is the code..

 var yogNumber = 0; var yogs = document.querySelectorAll('.yog'); function next() { yogNumber++; if (yogs.length > yogNumber) { document.querySelector('.active').classList.remove('active'); yogs[yogNumber].classList.add('active'); } } function previous() { yogNumber--; if (yogs.length > yogNumber) { document.querySelector('.active').classList.remove('active'); yogs[yogNumber].classList.add('active'); } } 

 .yog { display: none } .active { display: block } 

 <div class="yog active"> <div id="heading">Text 1</div> </div> <div class="yog"> <div id="heading">Text 2</div> </div> <div class="yog"> <div id="heading">Text 3</div> </div> <div class="yog"> <div id="heading">Text 4</div> </div> <br /> <div id="left" onclick="previous()"> <</div> <br /> <div id="right" onclick="next()">></div> 

The error which I am getting at the moment is "TypeError: Cannot read property 'classList' of undefined".

Answer 1

Please try below.

 var yogNumber = 0; var yogs = document.querySelectorAll('.yog'); function next() { yogNumber++; if (yogs.length > yogNumber) { document.querySelector('.active').classList.remove('active'); yogs[yogNumber].classList.add('active'); } else{ yogNumber=0; document.querySelector('.active').classList.remove('active'); yogs[yogNumber].classList.add('active'); } } function previous() { yogNumber--; if(yogNumber<0) { document.querySelector('.active').classList.remove('active'); yogs[yogs.length-1].classList.add('active'); yogNumber=yogs.length-1; } else if (yogs.length > yogNumber) { document.querySelector('.active').classList.remove('active'); yogs[yogNumber].classList.add('active'); } } 

 .yog { display: none } .active { display: block } 

 <div class="yog active"> <div id="heading">Text 1</div> </div> <div class="yog"> <div id="heading">Text 2</div> </div> <div class="yog"> <div id="heading">Text 3</div> </div> <div class="yog"> <div id="heading">Text 4</div> </div> <br /> <div id="left" onclick="previous()"> <</div> <br /> <div id="right" onclick="next()">></div> 

Answer 2

Add an else clause and set the yogNumber to 0 if the length has reached last yog. ie

        function next(){
          yogNumber++;
          if(yogs.length>yogNumber)
          {
            activateDiv(yogNumber);
          }else{
            yogNumber = 0;
           activateDiv(yogNumber);

          }
        }

And I would extract the logic for making a div active to a function ie

function activateDiv(var divNumber){
  document.querySelector('.active').classList.remove('active');
  yogs[divNumber].classList.add('active');
}

Answer 3

var divs = document.getElementsByClassName('yog'),
    yog = 0;

function next(){
    yog++;

    if(yog < divs.length)
        yog = 0;
}

If yog is more than divs.length then set the yog to 0.

Answer 4

You do not need to loop on divs. You can use .next and .prev to do it.

Sample

 function next() { var d = $(".yog.active"); if (d.next().hasClass("yog")) d.removeClass("active") .next() .addClass("active"); } function previous() { var d = $(".yog.active"); if (d.prev().hasClass("yog")) d.removeClass("active") .prev() .addClass("active"); } 

 .yog { display: none } .active { display: block } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="yog active"> <div id="heading">Text 1</div> </div> <div class="yog"> <div id="heading">Text 2</div> </div> <div class="yog"> <div id="heading">Text 3</div> </div> <div class="yog"> <div id="heading">Text 4</div> </div> <br /> <div id="left" onclick="previous()"> < </div> <br /> <div id="right" onclick="next()">></div>