我正在使用 javascript 和 html 制作一个小测验应用程序。测验的设置使用户只能在页面上看到一个问题。当他们按下上一个和下一个按钮时,它分别向用户显示上一个和下一个问题。
我想要做的是,遍历由 getElementByClassName 返回的元素数组,并在用户每次按下“下一步”按钮时显示下一个项目。我目前遇到的问题是,当按下“下一步”按钮时,第一个元素之后的每个元素都显示在页面上。页面上还有一个“上一个”按钮,向用户显示前一个元素,但是它删除了数组中的第一个元素,显示“无法设置未定义的属性‘显示’”错误和 div 的其余部分元素仍然显示在页面上。
这是当前的代码 HTML:
const nextBtn = document.getElementById('next');
const prevBtn = document.getElementById('prev');
const quizes = document.getElementsByClassName('quiz');
//show and hide divs when user presses next
nextBtn.addEventListener('click', function() {
for (i = 0; i < quizes.length; i++) {
quizes[i].style.display = "block";
}
})
prevBtn.addEventListener('click', function() {
if (quizes.length > 1) {
for (i = 0; quizes.length > 1; i--) {
if (quizes[i].display = "block") {
quizes[i].style.display = "none";
}
}
} else {
alert('no …Run Code Online (Sandbox Code Playgroud)