在 javascript 測驗中顯示正確答案時遇到問題

Question

我正在玩一個簡單的 javascript 測驗，用戶可以在其中回答一些問題，最后我想向用戶展示他們的分數以及哪些答案是錯誤的。 但它不起作用，我不知道為什么。 有任何想法嗎？

這是我目前的代碼： https://codepen.io/tydh/pen/RwWPVEP

function submitAnswers() {

    const form = document.forms["quizForm"];                 
    form.addEventListener("submit", submitAnswers);

    function submitAnswers(e) { e.preventDefault();

    var total = 5;
    var score = 0;

    // get user input

    var q1 = document.forms["quizForm"]["q1"].value;
    var q2 = document.forms["quizForm"]["q2"].value;
    var q3 = document.forms["quizForm"]["q3"].value;
    var q4 = document.forms["quizForm"]["q4"].value;
    var q5 = document.forms["quizForm"]["q5"].value;

    // set correct answers

    var answers = ['b', 'a', 'd', 'b', 'd'];    

    // check answers (note i - 1 to account for array starting with [0])

    for (var i = 1; i <= total; i++) { const answer = answers[i - 1];

    if (form['q' + i].value == answer) {
        const label = document.querySelector('#q' + i + answer + ' label');
        label.style.color = 'green';
        score++;
    }

    // display results

    var results = document.getElementById("results");
    results.innerHTML ='<h3>You got <span> '+score+' </span> out of <span>'+total+'</span> </h3>';
    alert('You got '+score+' out of '+total); 

}

Answer 1

您的 function 中有語法錯誤，需要調用輸入。

 function submitAnswers() { var total = 5; var score = 0; // get user input var form=document.querySelector("form"); var q1 = document.forms["quizForm"]["q1"].value; var q2 = document.forms["quizForm"]["q2"].value; var q3 = document.forms["quizForm"]["q3"].value; var q4 = document.forms["quizForm"]["q4"].value; var q5 = document.forms["quizForm"]["q5"].value; // set correct answers var answers = ['b', 'a', 'd', 'b', 'd']; // check answers (note i - 1 to account for array starting with [0]) for (var i = 1; i <= total; i++) { const answer = answers[i - 1]; if (form['q' + i].value == answer) { const label = document.querySelector('#q' + i + answer + ' label'); label.style.color = 'green'; score++; } } // display results var results = document.getElementById("results"); results.innerHTML ='<h3>You got <span> '+score+' </span> out of <span>'+total+'</span> </h3>'; alert('You got '+score+' out of '+total); }

 <div id="container"> <header> <h1> Simple JavaScript Quiz</h1> <p> Test your knowledge in <strong>JavaScript fundamentals</strong></p> </header> <section> <div id="results"> </div> <form name="quizForm"> <h3>1. In which elements do we put in JavaScript code?</h3> <div id="q1a"><input type="radio" name="q1" value="a"><label>a. &lt;js&gt;</label></div> <div id="q1b"><input type="radio" name="q1" value="b"><label>b. &lt;script&gt;</label></div> <div id="q1c"><input type="radio" name="q1" value="c"><label>c. &lt;body&gt;</label></div> <div id="q1d"><input type="radio" name="q1" value="d"><label>d. asd</label></div> <h3>2. Which HTML attribute is used to reference an external JavaScript file?</h3> <div id="q2a"><input type="radio" name="q2" value="a"><label>a. src</label></div> <div id="q2b"><input type="radio" name="q2" value="b"><label>b. rel</label></div> <div id="q2c"><input type="radio" name="q2" value="c"><label>c. type</label></div> <div id="q2d"><input type="radio" name="q2" value="d"><label>d. href</label></div> <h3>3. How would you write "Hello" in an alert box?</h3> <div id="q3a"><input type="radio" name="q3" value="a"><label>a. msg("Hello");</label></div> <div id="q3b"><input type="radio" name="q3" value="b"><label>b. alertBox("Hello");</label></div> <div id="q3c"><input type="radio" name="q3" value="c"><label>c. document.write("Hello");</label></div> <div id="q3d"><input type="radio" name="q3" value="d"><label>d. alert("Hello");</label></div> <h3>4. JavaScript is directly related to "Java" Programming language?</h3> <div id="q4a"><input type="radio" name="q4" value="a"><label>a. True</label></div> <div id="q4b"><input type="radio" name="q4" value="b"><label>b. False</label></div> <h3>5. A variable in JavaScript must start with which special character?</h3> <div id="q5a"><input type="radio" name="q5" value="a"><label>a. @</label></div> <div id="q5b"><input type="radio" name="q5" value="b"><label>b. $</label></div> <div id="q5c"><input type="radio" name="q5" value="c"><label>c. #</label></div> <div id="q5d"><input type="radio" name="q5" value="d"><label>d. No Special</label></div> <br> <input type="button"onclick="submitAnswers()" value="Submit Answers"/> <br><br> </form> </section> </div>

Answer 2

您在兩個范圍內為 sumitAnswer 使用了相同的名稱，因此您可能會得到 function 陰影，因為內部 function 只會阻止默認值，並且永遠不會執行代碼的 Z65E8800B5C6800AAD896F888B2A62A。 基本上這里發生的是：

1. 文件加載完畢並在全局 scope 中提升 submitAnswer()
2. 在它里面，有 function submitAnswer 的 scope 有它自己的 function submitAnswer(e) 只防止默認。
3. 您從未調用過 submitAnswer() 所以沒有執行任何代碼

嘗試這個

    const form = document.forms["quizForm"];                 
    form.addEventListener("submit", submitAnswers);

    function submitAnswers(e) { 
        e.preventDefault();
        var total = 5;
        var score = 0;

        // get user input

        var q1 = document.forms["quizForm"]["q1"].value;
        var q2 = document.forms["quizForm"]["q2"].value; 
        var q3 = document.forms["quizForm"]["q3"].value;
        var q4 = document.forms["quizForm"]["q4"].value;
        var q5 = document.forms["quizForm"]["q5"].value;

        // set correct answers

        var answers = ['b', 'a', 'd', 'b', 'd'];    

        // check answers (note i - 1 to account for array starting with [0])

        for (var i = 1; i <= total; i++) { const answer = answers[i - 1];
            if (form['q' + i].value == answer) {
                const label = document.querySelector('#q' + i + answer + ' label');
                label.style.color = 'green';
                score++;
            }
        }

        // display results

        var results = document.getElementById("results");
        results.innerHTML ='<h3>You got <span> '+score+' </span> out of <span>'+total+'</span> </h3>';
        alert('You got '+score+' out of '+total);
    };

Answer 3

您在for循環中缺少結束} 。

const form = document.forms["quizForm"];                  
form.addEventListener("submit", submitAnswers);
function submitAnswers(e) { 

  e.preventDefault();
  var total = 5;
    var score = 0;

    // get user input

    var q1 = document.forms["quizForm"]["q1"].value;
    var q2 = document.forms["quizForm"]["q2"].value;
    var q3 = document.forms["quizForm"]["q3"].value;
    var q4 = document.forms["quizForm"]["q4"].value;
  var q5 = document.forms["quizForm"]["q5"].value;

  // set correct answers

    var answers = ['b', 'a', 'd', 'b', 'd'];    

    // check answers (note i - 1 to account for array starting with [0])

    for (var i = 1; i <= total; i++) { const answer = answers[i - 1];

        if (form['q' + i].value == answer) {
            const label = document.querySelector('#q' + i + answer + ' label');
            label.style.color = 'green';
            score++;
        }
     }

    // display results

    var results = document.getElementById("results");
    results.innerHTML ='<h3>You got <span> '+score+' </span> out of         <span>'+total+'</span> </h3>';
    alert('You got '+score+' out of '+total);
}