計算 JavaScript 測驗的分數

Question

我正在嘗試進行測驗，但無法顯示分數。

我使用帶有值的單選按鈕，錯誤答案為 0，正確答案為 25。 我在顯示分數時遇到問題。 這是我到目前為止所擁有的（HTML 和 Javascript）。

 function resultScore() { result = 0; var ans1 = document.getElementById("q1").value; var ans2 = document.getElementById("q2").value; var ans3 = document.getElementById("q3").value; var ans4 = document.getElementById("q4").value; result += ans1 + ans2 + ans3 + ans4; }

 <form id="form1"> <h1> Quiz:</h1> <p id="question">Which is mechanical engineering?</p> <input type="radio" class="answer" value="0" id="q1" name="choice1" />Study, design and application of equipment, devices and systems which use electricity, electronics, and electromagnetism.</label> <input type="radio" class="answer" value="0" id="q1" name="choice1" />Computer</label> <input type="radio" class="answer" value="25" id="q1" name="choice1" /> study that uses engineering physics, engineering mathematics, and materials science principles to design, analyze, manufacture, and maintain mechanical systems</label> <input type="radio" class="answer" value="0" id="q1" name="choice1" />Study of wild animals</label> <p id="question">Who is Nikola Tesla?</p> <input type="radio" class="answer" value="25" id="q2" name="choice2" />Serbian-American inventor, electrical engineer, mechanical engineer</label> <input type="radio" class="answer" value="0" id="q2" name="choice2" />A method to join strings.</label> <input type="radio" class="answer" value="0" id="q2" name="choice2" />Allows you to store information so it can be reused throughout the program</label> <input type="radio" class="answer" value="0" id="q2" name="choice2" />Allows you to make a decision based on a condition.</label> <p id="question">Who developed de Laval nozzle?</p> <input type="radio" class="answer" value="0" id="q3" name="choice3" />Edith Clarke</label> <input type="radio" class="answer" value="25" id="q3" name="choice3" />Gustaf de Laval</label> <input type="radio" class="answer" value="0" id="q3" name="choice3" />Thomas Edison</label> <input type="radio" class="answer" value="0" id="q3" name="choice3" />Alexander Graham Bell</label> <p id="question">Who is invented the first iridescent lightbulb?</p> <input type="radio" class="answer" value="0" id="q4" name="choice4" />Edith Clarke</label> <input type="radio" class="answer" value="0" id="q4" name="choice4" />Benjamin Franklin</label> <input type="radio" class="answer" value="0" id="q4" name="choice4" />Claude Shannon</label> <input type="radio" class="answer" value="25" id="q4" name="choice4" />Thomas Edison</label> <button type="submit" value="Submit" onclick="resultScore()">Submit</button> <h2 class="score" id="userScore"> Score: </h2>

Answer 1

• 你不需要提交 - 我使用 preventDefault 和提交事件而不是點擊
• 您需要將值轉換為數字（我使用+ ）
• 您需要遍歷所有選中的收音機
• 您不能有重復的 ID

 window.addEventListener("load", function() { // when page loaded document.getElementById("form1").addEventListener("submit", function(e) { // when submitted e.preventDefault(); // cancel submit result = 0; [...document.querySelectorAll(".answer:checked")] // all checked radios .forEach(rad => result += +rad.value); // add their numeric value document.getElementById("userScore").innerHTML = result; }) })

 <form id="form1"> <h1> Quiz:</h1> <p id="question">Which is mechanical engineering?</p> <input type="radio" class="answer" value="0" name="choice1" />Study, design and application of equipment, devices and systems which use electricity, electronics, and electromagnetism.</label> <input type="radio" class="answer" value="0" name="choice1" />Computer</label> <input type="radio" class="answer" value="25" name="choice1" /> study that uses engineering physics, engineering mathematics, and materials science principles to design, analyze, manufacture, and maintain mechanical systems</label> <input type="radio" class="answer" value="0" name="choice1" />Study of wild animals</label> <p id="question">Who is Nikola Tesla?</p> <input type="radio" class="answer" value="25" name="choice2" />Serbian-American inventor, electrical engineer, mechanical engineer</label> <input type="radio" class="answer" value="0" name="choice2" />A method to join strings.</label> <input type="radio" class="answer" value="0" name="choice2" />Allows you to store information so it can be reused throughout the program</label> <input type="radio" class="answer" value="0" name="choice2" />Allows you to make a decision based on a condition.</label> <p id="question">Who developed de Laval nozzle?</p> <input type="radio" class="answer" value="0" name="choice3" />Edith Clarke</label> <input type="radio" class="answer" value="25" name="choice3" />Gustaf de Laval</label> <input type="radio" class="answer" value="0" name="choice3" />Thomas Edison</label> <input type="radio" class="answer" value="0" name="choice3" />Alexander Graham Bell</label> <p id="question">Who is invented the first iridescent lightbulb?</p> <input type="radio" class="answer" value="0" name="choice4" />Edith Clarke</label> <input type="radio" class="answer" value="0" name="choice4" />Benjamin Franklin</label> <input type="radio" class="answer" value="0" name="choice4" />Claude Shannon</label> <input type="radio" class="answer" value="25" name="choice4" />Thomas Edison</label> <button type="submit" value="Submit">Submit</button> <h2 class="score" id="userScore"> Score: </h2>

Answer 2

簡而言之：

1. 將按鈕類型更改為button不submit因為后者刷新頁面並且不執行 js 功能。
2. 用計算結果設置得分內容。
3. 在進行計算之前，我已經使用parseInt()將值從 string 解析為 int。

 function resultScore() { result = 0; var ans1 = parseInt(document.querySelector('input[name="choice1"]:checked')?document.querySelector('input[name="choice1"]:checked').value:0); var ans2 = parseInt(document.querySelector('input[name="choice2"]:checked')?document.querySelector('input[name="choice2"]:checked').value:0); var ans3 = parseInt(document.querySelector('input[name="choice3"]:checked')?document.querySelector('input[name="choice3"]:checked').value:0); var ans4 = parseInt(document.querySelector('input[name="choice4"]:checked')?document.querySelector('input[name="choice4"]:checked').value:0); result = ans1 + ans2 + ans3 + ans4; const score = document.querySelector(".score"); score.innerHTML = `Score: ${result}`; }

 <form class="form1"> <h1> Quiz:</h1> <p class="question">Which is mechanical engineering?</p> <input type="radio" class="answer" value="0" name="choice1" />Study, design and application of equipment, devices and systems which use electricity, electronics, and electromagnetism.</label> <input type="radio" class="answer" value="0" name="choice1" />Computer</label> <input type="radio" class="answer" value="25" name="choice1" /> study that uses engineering physics, engineering mathematics, and materials science principles to design, analyze, manufacture, and maintain mechanical systems</label> <input type="radio" class="answer" value="0" name="choice1" />Study of wild animals</label> <p class="question">Who is Nikola Tesla?</p> <input type="radio" class="answer" value="25" name="choice2" />Serbian-American inventor, electrical engineer, mechanical engineer</label> <input type="radio" class="answer" value="0" name="choice2" />A method to join strings.</label> <input type="radio" class="answer" value="0" name="choice2" />Allows you to store information so it can be reused throughout the program</label> <input type="radio" class="answer" value="0" name="choice2" />Allows you to make a decision based on a condition.</label> <p class="question">Who developed de Laval nozzle?</p> <input type="radio" class="answer" value="0" name="choice3" />Edith Clarke</label> <input type="radio" class="answer" value="25" name="choice3" />Gustaf de Laval</label> <input type="radio" class="answer" value="0" name="choice3" />Thomas Edison</label> <input type="radio" class="answer" value="0" name="choice3" />Alexander Graham Bell</label> <p class="question">Who is invented the first iridescent lightbulb?</p> <input type="radio" class="answer" value="0" name="choice4" />Edith Clarke</label> <input type="radio" class="answer" value="0" name="choice4" />Benjamin Franklin</label> <input type="radio" class="answer" value="0" name="choice4" />Claude Shannon</label> <input type="radio" class="answer" value="25" name="choice4" />Thomas Edison</label> <button type="button" value="Submit" onclick="resultScore()">Submit</button> <h2 class="score" class="userScore"> Score: </h2>

編輯：

4. 我已將多個相同的id屬性更改為類，並使用name屬性來選擇單選按鈕。

5. 此外，如果未選擇無線電，則會添加驗證。

Answer 3

使用querySelectorAll獲取您選擇的答案， map value並使用parseInt轉換為 int 然后reduce添加。

很快，這將適用於或多或少的問題。

 function resultScore() { const result = Array.from(document.querySelectorAll("input[type='radio']:checked")) .map(({ value }) => parseInt(value)) .reduce((a,v) => a+v, 0); console.log(result); document.querySelector('.score').innerHTML = result; }

 <h1> Quiz:</h1> <p id="question">Which is mechanical engineering?</p> <input type="radio" class="answer" value="0" id="q1" name="choice1" />Study, design and application of equipment, devices and systems which use electricity, electronics, and electromagnetism.</label> <input type="radio" class="answer" value="0" id="q1" name="choice1" />Computer</label> <input type="radio" class="answer" value="25" id="q1" name="choice1" /> study that uses engineering physics, engineering mathematics, and materials science principles to design, analyze, manufacture, and maintain mechanical systems</label> <input type="radio" class="answer" value="0" id="q1" name="choice1" />Study of wild animals</label> <p id="question">Who is Nikola Tesla?</p> <input type="radio" class="answer" value="25" id="q2" name="choice2" />Serbian-American inventor, electrical engineer, mechanical engineer</label> <input type="radio" class="answer" value="0" id="q2" name="choice2" />A method to join strings.</label> <input type="radio" class="answer" value="0" id="q2" name="choice2" />Allows you to store information so it can be reused throughout the program</label> <input type="radio" class="answer" value="0" id="q2" name="choice2" />Allows you to make a decision based on a condition.</label> <p id="question">Who developed de Laval nozzle?</p> <input type="radio" class="answer" value="0" id="q3" name="choice3" />Edith Clarke</label> <input type="radio" class="answer" value="25" id="q3" name="choice3" />Gustaf de Laval</label> <input type="radio" class="answer" value="0" id="q3" name="choice3" />Thomas Edison</label> <input type="radio" class="answer" value="0" id="q3" name="choice3" />Alexander Graham Bell</label> <p id="question">Who is invented the first iridescent lightbulb?</p> <input type="radio" class="answer" value="0" id="q4" name="choice4" />Edith Clarke</label> <input type="radio" class="answer" value="0" id="q4" name="choice4" />Benjamin Franklin</label> <input type="radio" class="answer" value="0" id="q4" name="choice4" />Claude Shannon</label> <input type="radio" class="answer" value="25" id="q4" name="choice4" />Thomas Edison</label> <button onclick="resultScore()">Submit</button> <h2 class="score" id="userScore"> Score: </h2>

Answer 4

• 請不要對多個元素使用相同的 ID。 而是使用名稱來獲取所有無線電元素； 然后循環並查看變量是否被檢查並獲取值。
• 將值解析為整數，因為在從元素中獲取值時，它們以字符串的形式出現。
• （與計算部分無關）但作為一個好習慣，如果您有結束標簽，也請使用開始標簽（請參閱 html 中的標簽標簽）。

已經為您修復了解決方案

 function getSelectedValue(name) { var ele = document.getElementsByName(name); for (i = 0; i < ele.length; i++) { if (ele[i].checked) { return parseInt(ele[i].value) || 0 } } return 0 //This will avoid NaN condition incase nothing is selected } function resultScore() { result = 0; var ans1 = getSelectedValue("choice1"); var ans2 = getSelectedValue("choice2"); var ans3 = getSelectedValue("choice3"); var ans4 = getSelectedValue("choice4"); result += ans1 + ans2 + ans3 + ans4; document.getElementById("userScore").innerHTML = "Score: " + result }

 <form id="form1"> <h1> Quiz:</h1> <p id="question">Which is mechanical engineering?</p> <label><input type="radio" class="answer" value="0" name="choice1" />Study, design and application of equipment, devices and systems which use electricity, electronics, and electromagnetism.</label> <label><input type="radio" class="answer" value="0" name="choice1" />Computer</label> <label><input type="radio" class="answer" value="25" name="choice1" /> study that uses engineering physics, engineering mathematics, and materials science principles to design, analyze, manufacture, and maintain mechanical systems</label> <label><input type="radio" class="answer" value="0" name="choice1" />Study of wild animals</label> <p id="question">Who is Nikola Tesla?</p> <label><input type="radio" class="answer" value="25" name="choice2" />Serbian-American inventor, electrical engineer, mechanical engineer</label> <label><input type="radio" class="answer" value="0" name="choice2" />A method to join strings.</label> <label><input type="radio" class="answer" value="0" name="choice2" />Allows you to store information so it can be reused throughout the program</label> <label><input type="radio" class="answer" value="0" name="choice2" />Allows you to make a decision based on a condition.</label> <p id="question">Who developed de Laval nozzle?</p> <label><input type="radio" class="answer" value="0" name="choice3" />Edith Clarke</label> <label><input type="radio" class="answer" value="25" name="choice3" />Gustaf de Laval</label> <label><input type="radio" class="answer" value="0" name="choice3" />Thomas Edison</label> <label><input type="radio" class="answer" value="0" name="choice3" />Alexander Graham Bell</label> <p id="question">Who is invented the first iridescent lightbulb?</p> <label><input type="radio" class="answer" value="0" name="choice4" />Edith Clarke</label> <label><input type="radio" class="answer" value="0" name="choice4" />Benjamin Franklin</label> <label><input type="radio" class="answer" value="0" name="choice4" />Claude Shannon</label> <label><input type="radio" class="answer" value="25" name="choice4" />Thomas Edison</label> <button type="button" value="Submit" onclick="resultScore()">Submit</button> <h2 class="score" id="userScore"> Score: </h2>

希望能幫助到你。 回復任何澄清

Answer 5

只需獲取結果 dom 元素並使用新分數更新內容

document.getElementById('userScore').innerHTML = `Score: ${result}`;