您好，需要一些关于此代码的 javascript 部分的帮助。我有两个 JavaScript 函数：一个用于验证单选复选框是否被选中，另一个用于陶醉“答案”。目前，如果没有选择（这很好），则会显示警报，但答案不会显示（无论选择如何）。理想情况下，仅当选中其中一个复选框时才会显示“答案”，否则（如果未选择任何内容）将向页面发送警报。这是两个 javascript 函数：<script>document.getElementById("answer").style.display ="none"; function validateForm() { var choice = document.getElementsByName("Question"); for(var i = 0; i < 3; i++) { if(!(choice[i].checked)){ alert("please selected an answer choice"); return false; } } } function openTest() { document.getElementById("answer").style.display = "block"; }document.getElementById('button').addEventListener('click', openTest);</script>document.getElementById("answer").style.display ="none"; function validateForm() { var choice = document.getElementsByName("Question"); for(var i = 0; i < 3; i++) { if(!(choice[i].checked)){ alert("please selected an answer choice"); return false; } } } function openTest() { document.getElementById("answer").style.display = "block"; }document.getElementById('button').addEventListener('click', openTest); #test { width: 100px; height: 50px; background-color: lightblue; }<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>List of Questions</title></head><body><h1>Poll Question</h1><br> <table> <form onsubmit="return validateForm()"> {% for questions in question_list %} <tr> <th> {{ questions[2] }} </th> </tr> </form> {% endfor %} </table><br><br></body></html>
1 回答
弑天下
TA贡献1818条经验 获得超8个赞
我浏览了你的代码，在 javascript 中做了一些更改：
由于您在表单的提交事件上调用此函数，因此我在函数末尾添加了 return false ，这样它就不会抛出任何错误。
从 for 循环条件中删除了 3，并添加了
choices.length该条件，因为该条件仅循环 3 次，而由于有 4 个复选框，因此应该循环 4 次。删除了 openTest 函数，并将该语句移至 validateForm 函数内。
创建了一个新标志
noAnswerSelectedFlag，它将检测是否检查了任何答案。您的代码有一个缺陷，每次遇到未选择第一个元素时，它总是会显示不正确的警报，它应该仅在未选择答案时显示。因此，标志将设置为 true 或 false，如果为 false，则它将中断循环并跳出循环并检查标志是否设置为 true 或 false，如果为 false，则表示选择了答案，那么它将显示正确的答案否则会显示警报消息。
document.getElementById("answer").style.display ="none";
function validateForm() {
var choice = document.getElementsByName("Question");
var noAnswerSelectedFlag = false;
// removed 3 from here and added choices.length
for(var i = 0; i < choice.length; i++) {
// check if answer checked set to true for each time it encounters unchecked radio button
if(!(choice[i].checked)){
noAnswerSelectedFlag = true;
}
// set to false if radio button is checked and break the loop so that flag won't get modified
else {
noAnswerSelectedFlag = false;
break;
}
}
// check the flag's value if false show the answer
if(!noAnswerSelectedFlag) {
document.getElementById("answer").style.display = "block";
}
// else display alert msg.
else {
alert("please select an answer.");
}
return false;
}
这是适合您的工作代码：
document.getElementById("answer").style.display ="none";
function validateForm() {
var choice = document.getElementsByName("Question");
var noAnswerSelectedFlag = false;
for(var i = 0; i < choice.length; i++) {
if(!(choice[i].checked)){
noAnswerSelectedFlag = true;
}
else {
noAnswerSelectedFlag = false;
break;
}
}
if(!noAnswerSelectedFlag) {
document.getElementById("answer").style.display = "block";
}
else {
alert("please select an answer.");
}
return false;
}
#test {
width: 100px;
height: 50px;
background-color: lightblue;
}
<h1>Poll Question</h1><br>
<table>
<form onsubmit="return validateForm()">
{% for questions in question_list %}
<tr>
<th> {{ questions[2] }} </th>
</tr>
<tr>
<td> <input type="radio" id="UserResponse1" name="Question" value="question1">
<label for="UserResponse1">{{ questions[3] }}</label><br> </td>
</tr>
<tr>
<td> <input type="radio" id="UserResponse2" name="Question" value="question2">
<label for="UserResponse2">{{ questions[4] }}</label><br></td>
</tr>
<tr>
<td> <input type="radio" id="UserResponse3" name="Question" value="question3">
<label for="UserResponse3">{{ questions[5]}}</label><br> </td>
</tr>
<tr>
<td> <input type="radio" id="UserResponse4" name="Question" value="question4">
<label for="UserResponse4">{{ questions[6] }}</label><br> </td>
</tr>
<tr>
<td>
<br><button id="button">see answer </button>
<div id="answer">The correct answer is: {{ questions[7] }}</div>
</td>
</tr>
</form>
{% endfor %}
添加回答
举报
0/150
提交
取消