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 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] 삭제
몇 마디 만하겠습니다