Übermitteln und Zurücksetzen von Schaltflächen mithilfe von Javascript für Dropdown-Listenformular

-1

Ich muss 2 Schaltflächen hinzufügen, um Dropdown-Listenformulare für ein Quiz mithilfe von Javascript zu überprüfen und zurückzusetzen. Meine Verify-Taste funktioniert, aber ich brauche sie auch, um ein Fenster mit der Punktzahl anzuzeigen. Wie schreibt man eine Funktion, um alle Formulare auf die erste Option zurückzusetzen?Übermitteln und Zurücksetzen von Schaltflächen mithilfe von Javascript für Dropdown-Listenformular

<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>

Quelle

2016-12-04 Nica

Geben Sie ihnen einen Klassennamen und Schleife durch jedes Element dieser Klasse? – NewToJS

Hier ist ein Beispiel: https://jsfiddle.net/cau7uzko/ – NewToJS

Sie könnten auch eine Klasse für alle Antworten verwenden ... was bedeutet, dass Sie die 'getElementsById() 'oder die if-Anweisung nicht duplizieren müssen. – NewToJS

Sie können den Wert eines ausgewählten Elements in JavaScript festgelegt wie folgt aus:

document.getElementById("mySelectId").value = "myDefaultValue";

Also, auf Ihre wählen, deren ID „form10“, zum Beispiel, können Sie den Wert wie folgt festlegen in Ihrer clearall() Funktion:

function clearall() { 
    document.getElementById("form10").value = "wrong"; 
}

Wiederholen Sie für die anderen „FormX“ Elemente und wenn Sie den Reset-Knopf klicken, werden sie alle auf die Standardwerte zurückgesetzt. Um zu vermeiden, den Code wie oben zu wiederholen, können Sie dies in einer Schleife von 1 bis 10 tun, aber denken Sie daran, dass Sie form5 auf "rechts" setzen müssen, da dies die einzige Auswahl ist, die "rechts" als erste Wahl hat .

Quelle

2016-12-04 22:20:02 PaulH

Übermitteln und Zurücksetzen von Schaltflächen mithilfe von Javascript für Dropdown-Listenformular

Antwort

Verwandte Themen