我正在尝试使用javascript/html制作一个小测验web应用程序。页面上的单个问题由div标签分隔,并带有相同的"quiz“类。页面上有两个按钮,一个是“上一个”按钮,一个是“下一个”按钮。根据用户点击的内容,页面将通过隐藏/显示div在页面上显示下一个测验。我要做的是向应用程序添加一个输入验证。在用户转到下一个问题之前,我想让它必须选中一个单选按钮,否则会显示一个警告框。属于同一问题的所有单选按钮都具有相同的类(即问题1的所有单选按钮都具有相同的类quiz1)。目前,应用程序能够检查选择了哪个输入(通过使用if element.checked)。按照这个逻辑,我尝试使用if(!element.checked)创建一个警告,但是警告框陷入循环。因此,到目前为止,我唯一能想到的其他解决方案是检查是否在同一个类中至少选择了一个单选按钮,我不确定如何实现这一点。
let savedAns = [];
const nextBtn = document.getElementById('next');
const prevBtn = document.getElementById('prev');
const quizes = document.querySelectorAll('.quiz');
const form = document.querySelector('form');
const inputEl = document.querySelectorAll('input');
const total = quizes.length;
//a variable to increment the classes
let ind = 0;
//get all the input elements for each question, assign a class
quizes.forEach(function(element) {
ind++;
let inputs = element.querySelectorAll('input');
inputs.forEach((input) => {
input.classList.add(`quiz${ind}`)
})
})
//keep a track of which question is visible
let count = 0;
//function to hide all the quizes
const hide = function() {
quizes.forEach((element) => {
element.style.display = 'none'
})
}
//show and hide divs when user presses next
nextBtn.addEventListener('click', function() {
if (count < total - 1) {
inputEl.forEach(function(element) {
if (element.checked) {
savedAns[count] = element.value;
console.log(savedAns)
}
})
count++;
} else {
inputEl.forEach(function(element) {
if (element.checked) {
savedAns[count] = element.value;
console.log(savedAns)
}
})
alert('no more questions left')
return
}
hide();
quizes[count].style.display = 'block'
})
prevBtn.addEventListener('click', function() {
if (count > 0) {
count--;
} else {
alert('no more previous questions')
return
}
hide();
quizes[count].style.display = 'block'
})<div class="content">
<form>
<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>
</form>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
如果有任何其他方法来解决这个问题,我们非常感谢对正确方向的提示。我也是使用纯javascript编写此应用程序,所以请不要使用jquery。谢谢你。
发布于 2021-02-11 16:30:30
因为您已经知道当前哪个问题是活动的,所以您可以检查活动问题下的任何输入是否被选中。
let selectedAnswer = -1;
const activeInputs = quizes[count].querySelectorAll('input');
activeInputs.forEach((input, index) => {
if(input.checked) selectedAnswer = index;
});
if (selectedAnswer === -1) {
alert('Select answer');
return;
}下面是工作代码片段。
let savedAns = [];
const nextBtn = document.getElementById('next');
const prevBtn = document.getElementById('prev');
const quizes = document.querySelectorAll('.quiz');
const form = document.querySelector('form');
const inputEl = document.querySelectorAll('input');
const total = quizes.length;
//a variable to increment the classes
let ind = 0;
//get all the input elements for each question, assign a class
quizes.forEach(function(element) {
ind++;
let inputs = element.querySelectorAll('input');
inputs.forEach((input) => {
input.classList.add(`quiz${ind}`)
})
})
//keep a track of which question is visible
let count = 0;
//function to hide all the quizes
const hide = function() {
quizes.forEach((element) => {
element.style.display = 'none'
})
}
//show and hide divs when user presses next
nextBtn.addEventListener('click', function() {
let selectedAnswer = -1;
const activeInputs = quizes[count].querySelectorAll('input');
activeInputs.forEach((input, index) => {
if(input.checked) selectedAnswer = index;
});
if (selectedAnswer === -1) {
alert('Select answer');
return;
}
if (count < total - 1) {
inputEl.forEach(function(element) {
if (element.checked) {
savedAns[count] = element.value;
console.log(savedAns)
}
})
count++;
} else {
inputEl.forEach(function(element) {
if (element.checked) {
savedAns[count] = element.value;
console.log(savedAns)
}
})
alert('no more questions left')
return
}
hide();
quizes[count].style.display = 'block'
})
prevBtn.addEventListener('click', function() {
if (count > 0) {
count--;
} else {
alert('no more previous questions')
return
}
hide();
quizes[count].style.display = 'block'
})<div class="content">
<form>
<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>
</form>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
https://stackoverflow.com/questions/66149376
复制相似问题