Javascript 验证，然后显示元素
您好，需要一些关于此代码的 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回答
-
弑天下
我浏览了你的代码，在 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 %}
随时随地看视频慕课网APP
相关分类
JavaScript