循环通过一个<；divs>；并且每次使用javascript只显示一个

我正在使用javascript和html制作一个小测验应用程序。测验设置为用户只能在页面上看到一个问题。当他们按下“上一个”和“下一个”按钮时，它会分别向用户显示上一个和下一个问题

我试图做的是，循环通过getElementByClassName返回的元素数组，并在用户每次按下“next”按钮时显示下一项。我目前的问题是，当按下“下一步”按钮时，第一个元素之后的每个元素都会显示在页面上。页面上还有一个“previous”按钮，向用户显示前一个元素，但是它删除了数组中的第一个元素，显示了“Cannot set property'display'of undefined”错误，其余的div元素仍显示在页面上

这是当前代码 HTML:

const nextBtn=document.getElementById（'next'）；
const prevBtn=document.getElementById（'prev'）；
const quizes=document.getElementsByClassName（'quick'）；
//当用户按下下一步时显示和隐藏div
nextBtn.addEventListener（'click'，function（）{
for（i=0；i1）{
对于（i=0；quizes.length>1；i--）{
if（quizes[i].display=“block”）{
提问[i].style.display=“无”；
}
}
}否则{
警报（'不再有以前的问题！'）
}
})

问题1

问题2

上
接下来

我认为您应该做的是跟踪当前可见的问题，然后在显示活动问题之前切换所有其他问题

下面我举了一个简单的例子，希望你能理解背后的想法，否则请告诉我

const nextBtn=document.getElementById（'next'）；
const prevBtn=document.getElementById（'prev'）；
const quizes=document.querySelectorAll（'.quick'）；
const total=quizes.length；
让计数=0；
const hideAll=（）=>quizes.forEach（q=>q.style.display='none'）；
常量showNext=（）=>{
如果（计数{
如果（计数>0）计数--；
否则{
警惕（“不再有以前的问题”）；
返回；
}
希德尔（）；
测验[count].style.display='block'；
}
//当用户按下下一步时显示和隐藏div
nextBtn.addEventListener（'click'，function（）{
showNext（）；
})
prevBtn.addEventListener（'click'，函数（）{
showPrev（）；
})

问题1

问题2

问题3

问题4

上
Next

如果（质询[i].display=“block”）{

您在这里缺少两个等号。==您不想使用循环。您应该跟踪可见的问题。当用户单击“Next”时，隐藏当前问题并显示下一个问题。质询[i].*style*。在您的IFA中额外显示，而不是使用内联的

style=“display:none”

我会使用一个类，比如

活动问题

。所以你的css会以

为目标。测验

并没有显示，但随后

。测验。活动问题

会有显示块。然后你只需要添加/删除类

活动问题

，而不是更改内联样式。