-1
我需要添加2個按鈕來驗證並重置使用Javascript進行測驗的下拉列表表單。我的驗證按鈕有效，但我也需要它來顯示帶有分數的窗口。如何編寫一個函數將所有表單重置爲第一個選項？使用Javascript下拉列表表單提交併重置按鈕
<script>
function finalScore() {
var i = 0;
var select1 = document.getElementById("form1");
var answer1 = select1.options[select1.selectedIndex].value;
if(answer1 == "right"){
i++;
}
var select2 = document.getElementById("form2");
var answer2 = select2.options[select2.selectedIndex].value;
if(answer2 == "right"){
i++;
}
var select3 = document.getElementById("form3");
var answer3 = select3.options[select3.selectedIndex].value;
if(answer3 == "right"){
i++;
}
var select4 = document.getElementById("form4");
var answer4 = select4.options[select4.selectedIndex].value;
if(answer4 == "right"){
i++;
}
var select5 = document.getElementById("form5");
var answer5 = select5.options[select5.selectedIndex].value;
if(answer5 == "right"){
i++;
}
var select6 = document.getElementById("form6");
var answer6 = select6.options[select6.selectedIndex].value;
if(answer6 == "right"){
i++;
}
var select7 = document.getElementById("form7");
var answer7 = select7.options[select7.selectedIndex].value;
if(answer7 == "right"){
i++;
}
var select8 = document.getElementById("form8");
var answer8 = select8.options[select8.selectedIndex].value;
if(answer8 == "right"){
i++;
}
var select9 = document.getElementById("form9");
var answer9 = select9.options[select9.selectedIndex].value;
if(answer9 == "right"){
i++;
}
var select10 = document.getElementById("form10");
var answer10 = select10.options[select9.selectedIndex].value;
if(answer10 == "right"){
i++;
}
document.getElementById("scoreDisplay").innerHTML = i;
}
</script>
<body>
<div class="bloc1">
Select the word which does not belong to this food group from the selection list:
</div>
<div class="bloc2">
</br>
<form>
1. What food doesn’t belong to this food group?
</br>
<select id="form1">
<option value="wrong">Banana</option>
<option value="right">Beef</option>
<option value="wrong">Peach</option>
<option value="wrong">Nectarines</option>
<option value="wrong">Plums</option>
<option value="wrong">Tangerines</option>
</select>
</form></br>
<form>
2. The food group in question 1 is:
</br>
<select id="form2">
<option value="wrong">Meat, Poultry, Fish, Beans, Eggs and Nuts Group</option>
<option value="wrong">Fats, Oils and Sweets Group</option>
<option value="right">Fruit Group</option>
<option value="wrong">Bread, Cereal, Rice and Pasta Group</option>
<option value="right">Milk, Yogurt and Cheese Group</option>
</select>
</form></br>
<form>
3. What food doesn’t belong to this food group?
</br>
<select id="form3">
<option value="wrong">Chicken</option>
<option value="wrong">Steak</option>
<option value="wrong">Lamb</option>
<option value="wrong">Crab</option>
<option value="right">Kiwi</option>
</select>
</form></br>
<form>
4. The food group in question 3 is:
</br>
<select id="form4">
<option value="wrong">Bread, Cereal, Rice and Pasta Group</option>
<option value="right">Meat, Poultry, Fish, Beans, Eggs and Nuts Group</option>
<option value="wrong">Vegetable Group</option>
<option value="wrong">Milk, Yogurt and Cheese Group</option>
<option value="wrong">Fats, Oils and Sweets Group</option>
</select>
</form></br>
<form>
5. What food doesn’t belong to this food group?
</br>
<select id="form5">
<option value="right">Apricot</option>
<option value="wrong">Squash</option>
<option value="wrong">Zucchini</option>
<option value="wrong">Potato</option>
<option value="wrong">Broccoli</option>
</select>
</form></br>
<form>
6. The food group in question 5 is:
</br>
<select id="form6">
<option value="wrong">Meat, Poultry, Fish, Beans, Eggs and Nuts Group</option>
<option value="wrong">Fruit Group</option>
<option value="right">Vegetable Group</option>
<option value="wrong">Fats, Oils and Sweets Group</option>
<option value="wrong">Bread, Cereal, Rice and Pasta Group</option>
</select>
</form></br>
<form>
7. What food doesn’t belong to this food group?
</br>
<select id="form7">
<option value="wrong">Chocolate milk</option>
<option value="wrong">Cream cheese</option>
<option value="wrong">Ice cream</option>
<option value="right">Salad dressing</option>
<option value="wrong">Yogurt</option>
</select>
</form></br>
<form>
8. The food group in question 7 is:
</br>
<select id="form8">
<option value="wrong">Fruit Group</option>
<option value="right">Dairy Group</option>
<option value="wrong">Vegetable Group</option>
<option value="wrong">Meat, Poultry, Fish, Beans, Eggs and Nuts Group</option>
<option value="wrong">Fats, Oils and Sweets Group</option>
</select>
</form></br>
<form>
9. What food doesn’t belong to this food group?
</br>
<select id="form9">
<option value="wrong">Cookies</option>
<option value="wrong">Candy</option>
<option value="right">Salad dressing</option>
<option value="wrong">Cherries</option>
<option value="wrong">Butter</option>
</select>
</form></br>
<form>
10. The food group in question 9 is:
</br>
<select id="form10">
<option value="wrong">Dairy Group</option>
<option value="wrong">Vegetable Group</option>
<option value="wrong">Meat, Poultry, Fish, Beans, Eggs and Nuts Group</option>
<option value="wrong">Bread, Cereal, Rice and Pasta Group</option>
<option value="right">Fats, Oils and Sweets Group</option>
</select>
</form>
</div>
<div class="bloc3">
<input type="button" value="Submit" onclick="finalScore()">
<input type="button" value="Reset all" onclick="clearall()">
</br></br>
Questions answered right:
<div id="scoreDisplay">score goes here</div>
</body>
</html>
</div>
給他們一個類名並循環該類的每個元素？ – NewToJS
下面是一個例子：https://jsfiddle.net/cau7uzko/ – NewToJS
你也可以用一個類來表示所有的答案......這意味着你不需要重複'getElementsById（）'或if語句。 – NewToJS