如何重复循环div(How to repeatedly loop through divs)

 我有一个脚本，可以在单击“下一个”或“上一个”按钮时更改div显示属性。 我可以单击Next并查看下一个div或单击Previous以查看上一个; 但是，一旦它到达结尾，classList变为undefined或null。 我想要做的是，当第一次加载页面时，我希望用户单击Next直到结束，然后单击循环中的第一个div。 此外，如果用户点击第一页上的Previous，那么我希望用户看到最后一个div。 任何帮助表示赞赏。 谢谢！ 以下是代码.. 
 
 
 
 
 
  
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>
 
 
 
 
 
 我目前得到的错误是“TypeError：无法读取未定义的属性'classList'”。 

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". 

原文：https://stackoverflow.com/questions/38430742