我正在使用javascript和html制作小型测验应用程序。设置测验，以便用户只能在页面上看到一个问题。当他们按下上一个和下一个按钮时，它将分别向用户显示上一个和下一个问题。
我想做的是，遍历getElementByClassName返回的元素数组，并在每次用户按下“下一步”按钮时显示下一项。我当前遇到的问题是，当按下“下一个”按钮时，第一个元素之后的每个单个元素都会显示在页面上。页面上还有一个“上一个”按钮，向用户显示前一个上一个元素，但是它删除了数组中的第一个元素，显示了“无法设置属性'display'of undefined”错误，其余的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 more previous questions!')
}
})<div class="quiz">
<p>Question 1</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none">
<p>Question 2</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>非常感谢您对错误的任何解释以及对正确方向的任何提示。谢谢。
我认为您应该做的是跟踪当前可见的问题，然后在使活动的问题可见之前切换所有其他问题。
我在下面做了一个简单的例子，希望您能理解其背后的想法，否则请让我知道。
const nextBtn = document.getElementById('next');
const prevBtn = document.getElementById('prev');
const quizes = document.querySelectorAll('.quiz');
const total = quizes.length;
let count = 0;
const hideAll = () => quizes.forEach( q => q.style.display = 'none' );
const showNext = () => {
if(count < total-1) count++;
else {
alert('no more questions');
return;
}
hideAll();
quizes[count].style.display = 'block';
}
const showPrev = () => {
if(count > 0) count--;
else {
alert('no more previous questions');
return;
}
hideAll();
quizes[count].style.display = 'block';
}
//show and hide divs when user presses next
nextBtn.addEventListener('click',function(){
showNext();
})
prevBtn.addEventListener('click',function(){
showPrev();
})<div class="quiz">
<p>Question 1</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none">
<p>Question 2</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none">
<p>Question 3</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none">
<p>Question 4</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句