Fatal编程技术网
  • javascript/
  • 使用Javascript为下拉列表表单提交和重置按钮

使用Javascript为下拉列表表单提交和重置按钮

javascript forms

使用Javascript为下拉列表表单提交和重置按钮,javascript,forms,Javascript,Forms,我需要添加2个按钮来验证和重置使用Javascript进行测验的下拉列表表单。我的验证按钮工作，但我也需要它来显示一个带有分数的窗口。如何编写函数将所有表单重置为第一个选项 <script> function finalScore() { var i = 0; var select1 = document.getElementById("form1"); var answer1 = select1.options[select1.selectedInd

我需要添加2个按钮来验证和重置使用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>


函数finalScore（）{
var i=0；
var select1=document.getElementById（“form1”）；
var answer1=select1.options[select1.selectedIndex].value；
如果（回答1==“正确”）{
i++；
}
var select2=document.getElementById（“form2”）；
var answer2=select2.options[select2.selectedIndex].value；
如果（回答2==“正确”）{
i++；
}
var select3=document.getElementById（“form3”）；
var answer3=select3.options[select3.selectedIndex].value；
如果（回答3==“正确”）{
i++；
}
var select4=document.getElementById（“form4”）；
var answer4=select4.options[select4.selectedIndex].value；
如果（回答4==“正确”）{
i++；
}
var select5=document.getElementById（“form5”）；
var answer5=select5.options[select5.selectedIndex].value；
如果（回答5==“正确”）{
i++；
}
var select6=document.getElementById（“form6”）；
var answer6=select6.options[select6.selectedIndex].value；
如果（回答6==“正确”）{
i++；
}
var select7=document.getElementById（“form7”）；
var answer7=select7.options[select7.selectedIndex].value；
如果（回答7==“正确”）{
i++；
}
var select8=document.getElementById（“form8”）；
var answer8=select8.options[select8.selectedIndex].value；
如果（回答8==“正确”）{
i++；
}
var select9=document.getElementById（“form9”）；
var answer9=select9.options[select9.selectedIndex].value；
如果（回答9==“正确”）{
i++；
}
var select10=document.getElementById（“form10”）；
var answer10=select10.options[select9.selectedIndex].value；
如果（回答10=“正确”）{
i++；
}
document.getElementById（“scoreDisplay”）.innerHTML=i；
}
从选择列表中选择不属于此食物组的单词：


1.什么食物不属于这个食物组？


香蕉
牛肉
桃
油桃
李子
橘子收成時


2.问题1中的食品类别是：


肉类、家禽、鱼类、豆类、蛋类和坚果类
脂肪、油和糖组
水果群
面包、谷物、米饭和面食类
牛奶、酸奶和奶酪组


3.什么食物不属于这个食物组？


鸡
牛排
羔羊
蟹
几维鸟


4.问题3中的食品类别是：


面包、谷物、米饭和面食类
肉类、家禽、鱼类、豆类、蛋类和坚果类
蔬菜类
牛奶、酸奶和奶酪组
脂肪、油和糖组


5.什么食物不属于这个食物组？


杏
南瓜
西葫芦
马铃薯
花椰菜


6.问题5中的食品类别是：


肉类、家禽、鱼类、豆类、蛋类和坚果类
水果群
蔬菜类
脂肪、油和糖组
面包、谷物、米饭和面食类


7.什么食物不属于这个食物组？


巧克力牛奶
奶油干酪
冰淇淋
沙拉酱
酸奶


8.问题7中的食品类别是：


水果群
乳品集团
蔬菜类
肉类、家禽、鱼类、豆类、蛋类和坚果类
脂肪、油和糖组


9什么食物不属于这个食物组？


曲奇饼
糖果
沙拉酱
樱桃
黄油


10问题9中的食品类别是：


乳品集团
蔬菜类
肉类、家禽、鱼类、豆类、蛋类和坚果类
面包、谷物、米饭和面食类
脂肪、油和糖组



答对的问题：
分数在这里
您可以在JavaScript中设置select元素的值，如下所示：

  document.getElementById("mySelectId").value = "myDefaultValue";
例如，在选择id为“form10”的函数时，可以在clearall（）函数中设置如下值：

 function clearall() {
     document.getElementById("form10").value = "wrong";
 }
对其他“formX”元素重复此操作，当您单击“重置”按钮时，它们将全部恢复为默认值。为了避免重复上述代码，您可以在1到10之间的循环中执行此操作，但请记住，您必须将form5设置为“right”，因为这是唯一一个将“right”作为第一选择的选项。

给他们一个类名，然后循环该类的每个元素？下面是一个示例：您也可以使用一个类来处理所有答案。。。这意味着您不需要复制
getElementsById（）
或if语句。也许这也会帮助您。。。？