亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Javascript 驗證,然后顯示元素

Javascript 驗證,然后顯示元素

撒科打諢 2023-09-14 17:57:46
您好,需要一些關于此代碼的 javascript 部分的幫助。我有兩個 JavaScript 函數:一個用于驗證單選復選框是否被選中,另一個用于陶醉“答案”。目前,如果沒有選擇(這很好),則會顯示警報,但答案不會顯示(無論選擇如何)。理想情況下,僅當選中其中一個復選框時才會顯示“答案”,否則(如果未選擇任何內容)將向頁面發送警報。這是兩個 javascript 函數:<script>document.getElementById("answer").style.display ="none";    function validateForm() {        var choice = document.getElementsByName("Question");        for(var i = 0; i < 3; i++) {             if(!(choice[i].checked)){                alert("please selected an answer choice");                return false;             }        }    }    function openTest() {            document.getElementById("answer").style.display = "block";      }document.getElementById('button').addEventListener('click', openTest);</script>document.getElementById("answer").style.display ="none";    function validateForm() {        var choice = document.getElementsByName("Question");        for(var i = 0; i < 3; i++) {             if(!(choice[i].checked)){                alert("please selected an answer choice");                return false;             }        }    }    function openTest() {            document.getElementById("answer").style.display = "block";      }document.getElementById('button').addEventListener('click', openTest);        #test {            width: 100px;            height: 50px;            background-color: lightblue;        }<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>List of Questions</title></head><body><h1>Poll Question</h1><br>   <table>       <form onsubmit="return validateForm()">        {% for questions in question_list %}            <tr>               <th> {{ questions[2] }} </th>            </tr>    </form>        {% endfor %}   </table><br><br></body></html>
查看完整描述

1 回答

?
弒天下

TA貢獻1818條經驗 獲得超8個贊

我瀏覽了你的代碼,在 javascript 中做了一些更改:

  • 由于您在表單的提交事件上調用此函數,因此我在函數末尾添加了 return false ,這樣它就不會拋出任何錯誤。

  • 從 for 循環條件中刪除了 3,并添加了choices.length該條件,因為該條件僅循環 3 次,而由于有 4 個復選框,因此應該循環 4 次。

  • 刪除了 openTest 函數,并將該語句移至 validateForm 函數內。

  • 創建了一個新標志noAnswerSelectedFlag,它將檢測是否檢查了任何答案。您的代碼有一個缺陷,每次遇到未選擇第一個元素時,它總是會顯示不正確的警報,它應該僅在未選擇答案時顯示。因此,標志將設置為 true 或 false,如果為 false,則它將中斷循環并跳出循環并檢查標志是否設置為 true 或 false,如果為 false,則表示選擇了答案,那么它將顯示正確的答案否則會顯示警報消息。

document.getElementById("answer").style.display ="none";

function validateForm() {

    var choice = document.getElementsByName("Question");

    var noAnswerSelectedFlag = false;

    // removed 3 from here and added choices.length

    for(var i = 0; i < choice.length; i++) {

        // check if answer checked set to true for each time it encounters unchecked radio button

        if(!(choice[i].checked)){

            noAnswerSelectedFlag = true;

        }

        // set to false if radio button is checked and break the loop so that flag won't get modified

        else {

            noAnswerSelectedFlag = false;

            break;

        }

    }

    // check the flag's value if false show the answer

    if(!noAnswerSelectedFlag) {

        document.getElementById("answer").style.display = "block";

    }

    // else display alert msg.

    else {

        alert("please select an answer.");

    }

    return false;

    

}

這是適合您的工作代碼:


document.getElementById("answer").style.display ="none";

function validateForm() {

    var choice = document.getElementsByName("Question");

    var noAnswerSelectedFlag = false;

    for(var i = 0; i < choice.length; i++) {

        if(!(choice[i].checked)){

            noAnswerSelectedFlag = true;

        }

        else {

            noAnswerSelectedFlag = false;

            break;

        }

    }

    if(!noAnswerSelectedFlag) {

        document.getElementById("answer").style.display = "block";

    }

    else {

        alert("please select an answer.");

    }

    return false;

    

}

#test {

    width: 100px;

    height: 50px;

    background-color: lightblue;

}

<h1>Poll Question</h1><br>



<table>

    <form onsubmit="return validateForm()">

        {% for questions in question_list %}

        <tr>

            <th> {{ questions[2] }} </th>

        </tr>

        <tr>

            <td> <input type="radio" id="UserResponse1" name="Question" value="question1">

                <label for="UserResponse1">{{ questions[3] }}</label><br> </td>

        </tr>

        <tr>

            <td>   <input type="radio" id="UserResponse2" name="Question" value="question2">

                <label for="UserResponse2">{{ questions[4] }}</label><br></td>

        </tr>

        <tr>

            <td>  <input type="radio" id="UserResponse3" name="Question" value="question3">

                <label for="UserResponse3">{{ questions[5]}}</label><br> </td>

        </tr>

        <tr>

            <td>   <input type="radio" id="UserResponse4" name="Question" value="question4">

                <label for="UserResponse4">{{ questions[6] }}</label><br> </td>

        </tr>

        <tr>

            <td>

                <br><button id="button">see answer </button>


                <div id="answer">The correct answer is: {{ questions[7] }}</div>

            </td>

        </tr>

    </form>

    {% endfor %}


查看完整回答
反對 回復 2023-09-14
  • 1 回答
  • 0 關注
  • 103 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號