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 %}
添加回答
舉報