為什么單擊提交按鈕后單擊事件處理程序會執行這么多次？

Question

我試圖用 Javascript 編寫一個簡單的測驗程序作為完成我的網絡作業的一種方式，但我遇到了一個問題，我只單擊了一次按鈕，但單擊處理程序函數一直在執行。

它們附在用於放置“提交”的按鈕上，當我選擇正確的答案 a、b、c 時它工作正常。 但是當我選擇答案 a,a,a 時，單擊事件處理程序會觸發多次。

我在網上找到了一個答案，他們建議使用 off()，但它似乎不起作用。

這是 html

<section class="test_your_english_section">
<h3 class="test_your_english_section_title">
    Test your English
</h3>
<p class="test_your_english_section_desc">
    for the questions below, please choose the best option to complete the sentence or conversation
</p>

<span>
    Page
    <strong id="question_completed_count"> 1 </strong>
    of <span>3</span>
</span>
<div class="progressBar" data-page-number="1" data-page-count="5">
    <div class="innerBar" style="width: 0%;"></div>
</div>
<form id="form_app">
    <fieldset >
    <legend>
        <div class="clearfix">
            <strong>1</strong>
            <span>Can I park here?</span>
        </div>
    </legend>
    <div class="clearfix" id="q_1" onclick="checkClick(this)">
        <label>
            <span>Sorry,I did that.</span>
            <input type="radio" name="q_1" value="a">
        </label>
        <em></em>

        <label>
            <span> It's the same place..</span>
            <input type="radio" name="q_1" value="b">
        </label>
        <em></em>

        <label>
            <span> Only for half an hour.</span>
            <input type="radio" name="q_1" value="c">
        </label>
        <em></em>
    </div>
</fieldset>
    <fieldset >
    <legend>
        <div class="clearfix">
            <strong>2</strong>
            <span>What colour will you paint the children's bedroom?</span>
        </div>
    </legend>
    <div class="clearfix" id="q_2" onclick=checkClick(this)>
        <label>
            <span>I hope it was right.</span>
            <input type="radio" name="q_2" value="a">
        </label>
        <em></em>

        <label>
            <span>We can't decide.</span>
            <input type="radio" name="q_2" value="b">
        </label>
        <em></em>

        <label>
            <span>It wasn't very difficult.</span>
            <input type="radio" name="q_2" value="c">
        </label>
        <em></em>
    </div>
</fieldset>
    <fieldset >
        <legend>
            <div class="clearfix">
                <strong>3</strong>
                <span>What colour will you paint the children's bedroom?</span>
            </div>
        </legend>
        <div class="clearfix" id="q_3" onclick=checkClick(this)>
            <label id="q_31">
                <span>I hope it was right.</span>
                <input type="radio" name="q_3" value="a">
            </label>
            <em></em>

            <label id="q_32">
                <span>We can't decide.</span>
                <input type="radio" name="q_3" value="b">
            </label>
            <em></em>

            <label id="q_33">
                <span>It wasn't very difficult.</span>
                <input type="radio" name="q_3" value="c">
            </label>
            <em></em>
        </div>
    </fieldset>
</form>
<button id="submit" onclick="showResults()">Submit Quiz</button>

以及帶有正在起作用的點擊事件處理程序的函數； 希望它很容易理解（如果沒有，請告訴我，我也想在這方面做得更好）：

innerBar=$('.innerBar')[0];
    let checkedCount = 0;
    const TotalQuestionsCount = 3;


    let checked1=false;
    let checked2=false;
    let checked3=false;

    function checkClick(input_div) {

        console.log(checkedCount);
        switch (input_div.id) {
            case "q_1":
                if (checked1)
                    break;
                checked1=true;
                checkedCount++;

                break;
            case "q_2":
                if (checked2)
                    break;
                checked2=true;
                checkedCount++;
                break;
            case "q_3":
                if (checked3)
                    break;
                checked3=true;
                checkedCount++;
                break;
        }
        progressRate=((checkedCount/TotalQuestionsCount)*100).toString()+'%';
        innerBar.style.width=progressRate;
    }
    function showResults() {

        var radio_names=['q_1','q_2','q_3'];
        var correctAnwers=['a','b','c'];
        var totalScore=0;
        //check all answered
        if (checkedCount !== TotalQuestionsCount) {
            alert("please answer all !");
            return;
        }
        //iterate radio_names and check corrsponding answer:
        for (i=0;i<TotalQuestionsCount;i++) {
            let radio_name=radio_names[i];
            //  find label
            let label=getRadioBtn(radio_name).parentElement;
            //  check answer and mark in label
            console.log(i+" value is "+getRadioBtn(radio_name).value+" correct is "+correctAnwers[i]);
            if (getRadioBtn(radio_name).value === correctAnwers[i]) {
                label.style.color="#2ecc71";
                totalScore++;
            }
            else {
                label.style.color="#cc1622";
            }

        }
        console.log("total score is "+totalScore);

        //
        // $('#submit').off();

    }
    function getRadioBtn(radio_name) {
        let selector_radio = 'input[name=' + radio_name + ']' + ':radio';
        let radio_btn=$(selector_radio);
        for (i=0;i<radio_btn.length;i++){
            if (radio_btn[i].checked){
                return radio_btn[i];
            }
        }

    }

Answer 1

這是一個很棒的資源，當我遇到它時可以幫助我解決此問題： 防止JQuery多個事件觸發好運！

Answer 2

嘗試聲明i喜歡這樣：

for (var i=0;i<TotalQuestionsCount;i++) {
    ....
}

我現在沒事了;-)