如何获得所有 got 元素的单击按钮的结果？

Question

我想构建一个简单易行的基于 Javascript 的测验应用程序（记住简单易行的代码不是高级 Javascript）工作正常，除了结果。我想使用 Javascript 在 html 标签中获得结果。这是我的代码：

// Javascript (important I need a solution in this code)

function check(){
    // question no1
    var score = 0;
    var q1WriteAnswer = document.getElementById('q1_o3');
    var q1option1 = document.getElementById('q1_o1');
    var q1option2 = document.getElementById('q1_o2');
    var q1option4 = document.getElementById('q1_o4');
    if (q1WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }
// question no2


    var score = 0;
    var q2WriteAnswer = document.getElementById('q2_o1');
    var q2option1 = document.getElementById('q2_o2');
    var q2option2 = document.getElementById('q2_o3');
    var q2option4 = document.getElementById('q2_o4');
    if (q2WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no3

    var score = 0;
    var q3WriteAnswer = document.getElementById('q3_o2');
    var q3option1 = document.getElementById('q3_o1');
    var q3option2 = document.getElementById('q3_o3');
    var q3option4 = document.getElementById('q3_o4');
    if (q3WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no4

    var score = 0;
    var q4WriteAnswer = document.getElementById('q4_o4');
    var q4option1 = document.getElementById('q4_o1');
    var q4option2 = document.getElementById('q4_o2');
    var q4option4 = document.getElementById('q4_o3');
    if (q4WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no5

    var score = 0;
    var q5WriteAnswer = document.getElementById('q5_o1');
    var q5option1 = document.getElementById('q5_o2');
    var q5option2 = document.getElementById('q5_o3');
    var q5option4 = document.getElementById('q5_o4');
    if (q5WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no6


    var score = 0;
    var q6WriteAnswer = document.getElementById('q6_o1');
    var q6option1 = document.getElementById('q6_o2');
    var q6option2 = document.getElementById('q6_o3');
    var q6option4 = document.getElementById('q6_o4');
    if (q6WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }



    // Questiton No7

    var score = 0;
    var q7WriteAnswer = document.getElementById('q7_o1');
    var q7option1 = document.getElementById('q7_o2');
    var q7option2 = document.getElementById('q7_o3');
    var q7option4 = document.getElementById('q7_o4');
    if (q7WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question no 8

    var score = 0;
    var q8WriteAnswer = document.getElementById('q8_o1');
    var q8option1 = document.getElementById('q8_o2');
    var q8option2 = document.getElementById('q8_o3');
    var q8option4 = document.getElementById('q8_o4');
    if (q8WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question No9

    var score = 0;
    var q9WriteAnswer = document.getElementById('q9_o3');
    var q9option1 = document.getElementById('q9_o1');
    var q9option2 = document.getElementById('q9_o2');
    var q9option4 = document.getElementById('q9_o4');
    if (q9WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question No10

    var score = 0;
    var q10WriteAnswer = document.getElementById('q10_o1');
    var q10option1 = document.getElementById('q10_o2');
    var q10option2 = document.getElementById('q10_o3');
    var q10option4 = document.getElementById('q10_o4');
    if (q10WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }
var ab = document.createElement("h3");
ab.innerText = score;
document.body.appendChild(ab);
}

/* *{
    padding: 0px;
    margin: 0px;

} */

body{

    color: white;
    background-color: #222;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

fieldset{
    border-radius: 15px;
    text-align: center;
}

h3{
    background-color: cornsilk;
    color: blue;
    width: 10vw;
    height: 5vh;
    text-align: center;
    position: relative;
    left: 45%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Quiz Application</h1>

    <div>
    <fieldset>
        <p>Who is the founder of Pakistan?</p>
        <input type="radio" name="founder" id="q1_o1">Allama Iqbal</radio>
        <input type="radio" name="founder" id="q1_o2">Manzoor Kapri</radio>
        <input type="radio" name="founder" id="q1_o3">Quaid-e-Azam</radio>
        <input type="radio" name="founder" id="q1_o4">Liaquat Ali Jinah</radio>
    </fieldset>
    </div><br>
    <br>
    <br>

    <div>
        <fieldset>
            <p>Who is national poet of Pakistan?</p>
            <input type="radio" name="national_poet" id="q2_o1">Allama Iqbal</radio>
            <input type="radio" name="national_poet" id="q2_o2">Manzoor Kapri</radio>
            <input type="radio" name="national_poet" id="q2_o3">Quaid-e-Azam</radio>
            <input type="radio" name="national_poet" id="q2_o4">Liaquat Ali Jinah</radio>
        </fieldset>
        </div><br>
        <br>
        <br>


        <div>
            <fieldset>
                <p>Who is the writer of national anthem of Pakistan?</p>
                <input type="radio" name="anthem_poet" id="q3_o1">Allama Iqbal</radio>
                <input type="radio" name="anthem_poet" id="q3_o2">Hafiz Jalindheri</radio>
                <input type="radio" name="anthem_poet" id="q3_o3">Quaid-e-Azam</radio>
                <input type="radio" name="anthem_poet" id="q3_o4">Liaquat Ali Jinah</radio>
            </fieldset>
            </div><br>
            <br>
            <br>


            <div>
                <fieldset>
                    <p>what is the national animal of Pakistan?</p>
                    <input type="radio" name="national_animal" id="q4_o1">Peacock</radio>
                    <input type="radio" name="national_animal" id="q4_o2">Dog</radio>
                    <input type="radio" name="national_animal" id="q4_o3">Lion</radio>
                    <input type="radio" name="national_animal" id="q4_o4">Markhor</radio>
                </fieldset>
                </div><br>
                <br>
                <br>



                <div>
                    <fieldset>
                        <p>Who is the Prime Minister of Pakistan?</p>
                        <input type="radio" name="pm" id="q5_o1">Imran Khan</radio>
                        <input type="radio" name="pm" id="q5_o2">Manzoor Kapri</radio>
                        <input type="radio" name="pm" id="q5_o3">Quaid-e-Azam</radio>
                        <input type="radio" name="pm" id="q5_o4">Liaquat Ali Jinah</radio>
                    </fieldset>
                    </div><br>
                    <br>
                    <br>



                    <div>
                        <fieldset>
                            <p>what is the area of pakistan in square km?</p>
                            <input type="radio" name="pk_sq_km" id="q6_o1">1,96,096 sq km</radio>
                            <input type="radio" name="pk_sq_km" id="q6_o1">5,05,095 sq km</radio>
                            <input type="radio" name="pk_sq_km" id="q6_o1">7,96,096 sq km</radio>
                            <input type="radio" name="pk_sq_km" id="q6_o1">2,96,096 sq km</radio>
                        </fieldset>
                        </div><br>
                        <br>
                        <br>


                        <div>
                            <fieldset>
                                <p>Who is the first prime minister of Pakistan?</p>
                                <input type="radio" name="first_PM" id="q7_o1">Liaquat Ali</radio>
                                <input type="radio" name="first_PM" id="q7_o2">Zulfiqar Ali Bhutto</radio>
                                <input type="radio" name="first_PM" id="q7_o3">Quaid-e-Azam</radio>
                                <input type="radio" name="first_PM" id="q7_o4">Manzoor Kapri</radio>
                            </fieldset>
                            </div><br>
                            <br>
                            <br>



                            <div>
                                <fieldset>
                                    <p>Which was the first capital of Pakistan?</p>
                                    <input type="radio" name="first_Capital" id="q8_o1">Karachi</radio>
                                    <input type="radio" name="first_Capital" id="q8_o2">Islamabad</radio>
                                    <input type="radio" name="first_Capital" id="q8_o3">Hydrabad</radio>
                                    <input type="radio" name="first_Capital" id="q8_o4">Quetta</radio>
                                </fieldset>
                                </div><br>
                                <br>
                                <br>



                                <div>
                                    <fieldset>
                                        <p>Who is the first woman prime minister of Pakistan?</p>
                                        <input type="radio" name="first_womanPM" id="q9_o1">Shoukat Khanam</radio>
                                        <input type="radio" name="first_womanPM" id="q9_o2">Shamshad Akhtar</radio>
                                        <input type="radio" name="first_womanPM" id="q9_o3">Benazir Bhutto</radio>
                                        <input type="radio" name="first_womanPM" id="q9_o4">Liaquat Ali Jinah</radio>
                                    </fieldset>
                                    </div><br>
                                    <br>
                                    <br>




                                    <div>
                                        <fieldset>
                                            <p>which is the current capital of Pakistan?</p>
                                            <input type="radio" name="founder" id="">Islamabad</radio>
                                            <input type="radio" name="founder" id="">Karachi</radio>
                                            <input type="radio" name="founder" id="">Hydrabad</radio>
                                            <input type="radio" name="founder" id="">Lahore</radio>
                                        </fieldset>
                                        </div><br>
                                        <br>
                                        <br>

                                        <button onclick="check()">Results</button>


    <script src="app.js"></script>
</body>
</html>

Answer 1

收音机输入元素不正确。您可能希望在每个 input type="radio" 下方添加一个 label 元素并删除结束的 radio 标签。

然后您可以通过检查是否只选择了正确答案来简化您的 javascript。我在底部提供了一个带有脚本的代码示例。

通过只获取正确答案的输入元素，您可以将它们存储在一个数组中并循环遍历该数组以查看是否检查了正确答案。

我提供了一个示例来展示获得所需内容的更好方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Quiz Application</h1>
    <h2>Score: <span id="score">0</span></h2>

    <div>
        <fieldset>Who is the founder of Pakistan? <br>
            <input type="radio" name="founder" id="q1_o1" value="Allama Iqbal">
            <label for="founder">Allama Iqbal</label>
            <input type="radio" name="founder" id="q1_o2" value="Manzoor Kapri">
            <label for="founder">Manzoor Kapri</label>
            <input type="radio" name="founder" id="q1_o3" value="Quaid-e-Azam">
            <label for="founder">Liaquat Ali Jinah</label>
            <input type="radio" name="founder" id="q1_o4" value="Liaquat Ali Jinah">
            <label for="founder">Liaquat Ali Jinah</label>
        </fieldset>

        <fieldset>Who is the national poet of Pakistan? <br>
            <input type="radio" name="national_poet" id="q2_o1" value="Allama Iqbal">
            <label for="national_poet">Allama Iqbal</label>
            <input type="radio" name="national_poet" id="q2_o2" value="Manzoor Kapri">
            <label for="national_poet">Manzoor Kapri</label>
            <input type="radio" name="national_poet" id="q2_o3" value="Quaid-e-Azam">
            <label for="national_poet">Liaquat Ali Jinah</label>
            <input type="radio" name="national_poet" id="q2_o4" value="Liaquat Ali Jinah">
            <label for="national_poet">Liaquat Ali Jinah</label>
        </fieldset>
    </div>

    <button onClick="check()">Check Answer</button>
    

    <script>
        function check(){
            // question no1
            var score = 0;
            var wrong_count = 0;
            var scoreNode = document.getElementById('score');


            const answer1 = document.getElementById('q1_o3');
            const answer2 = document.getElementById('q2_o1');

            const answers = [answer1, answer2];

            answers.forEach(answer => {
                if (answer.checked) {
                    score++
                } else {
                    wrong_count++
                }
            })

            scoreNode.innerHTML = score;

            if (wrong_count > 0) {
                alert(`You answered ${wrong_count} question(s) incorrectly.`);
            }
            
        }
    </script>
</body>
</html>

Answer 2

你有几个错误：

你一直在添加一个不应该存在的结尾
你一直将总和重置为 0
你 js 有 10 个问题你 html 有 9
您对正文的附加不正确

// Javascript (important I need a solution in this code)

function check(){
    // question no1
    var score = 0;
    var q1WriteAnswer = document.getElementById('q1_o3');
    var q1option1 = document.getElementById('q1_o1');
    var q1option2 = document.getElementById('q1_o2');
    var q1option4 = document.getElementById('q1_o4');
    if (q1WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }
// question no2


   // var score = 0;
    var q2WriteAnswer = document.getElementById('q2_o1');
    var q2option1 = document.getElementById('q2_o2');
    var q2option2 = document.getElementById('q2_o3');
    var q2option4 = document.getElementById('q2_o4');
    if (q2WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no3

   // var score = 0;
    var q3WriteAnswer = document.getElementById('q3_o2');
    var q3option1 = document.getElementById('q3_o1');
    var q3option2 = document.getElementById('q3_o3');
    var q3option4 = document.getElementById('q3_o4');
    if (q3WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no4

   // var score = 0;
    var q4WriteAnswer = document.getElementById('q4_o4');
    var q4option1 = document.getElementById('q4_o1');
    var q4option2 = document.getElementById('q4_o2');
    var q4option4 = document.getElementById('q4_o3');
    if (q4WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no5

   // var score = 0;
    var q5WriteAnswer = document.getElementById('q5_o1');
    var q5option1 = document.getElementById('q5_o2');
    var q5option2 = document.getElementById('q5_o3');
    var q5option4 = document.getElementById('q5_o4');
    if (q5WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no6


   // var score = 0;
    var q6WriteAnswer = document.getElementById('q6_o1');
    var q6option1 = document.getElementById('q6_o2');
    var q6option2 = document.getElementById('q6_o3');
    var q6option4 = document.getElementById('q6_o4');
    if (q6WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }



    // Questiton No7

   // var score = 0;
    var q7WriteAnswer = document.getElementById('q7_o1');
    var q7option1 = document.getElementById('q7_o2');
    var q7option2 = document.getElementById('q7_o3');
    var q7option4 = document.getElementById('q7_o4');
    if (q7WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question no 8

   // var score = 0;
    var q8WriteAnswer = document.getElementById('q8_o1');
    var q8option1 = document.getElementById('q8_o2');
    var q8option2 = document.getElementById('q8_o3');
    var q8option4 = document.getElementById('q8_o4');
    if (q8WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question No9

  //  var score = 0;
    var q9WriteAnswer = document.getElementById('q9_o3');
    var q9option1 = document.getElementById('q9_o1');
    var q9option2 = document.getElementById('q9_o2');
    var q9option4 = document.getElementById('q9_o4');
    if (q9WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question No10
/*
    var score = 0;
    var q10WriteAnswer = document.getElementById('q10_o1');
    var q10option1 = document.getElementById('q10_o2');
    var q10option2 = document.getElementById('q10_o3');
    var q10option4 = document.getElementById('q10_o4');
    if (q10WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }
    
*/

var ab = document.createElement("h3");
ab.innerText = score;
document.getElementsByTagName('body')[0].appendChild(ab);

}

/* *{
    padding: 0px;
    margin: 0px;

} */

body{

    color: white;
    background-color: #222;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

fieldset{
    border-radius: 15px;
    text-align: center;
}

h3{
    background-color: cornsilk;
    color: blue;
    width: 10vw;
    height: 5vh;
    text-align: center;
    position: relative;
    left: 45%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Quiz Application</h1>

    <div>
    <fieldset>
        <p>Who is the founder of Pakistan?</p>
        <input type="radio" name="founder" id="q1_o1">Allama Iqbal
        <input type="radio" name="founder" id="q1_o2">Manzoor Kapri
        <input type="radio" name="founder" id="q1_o3">Quaid-e-Azam
        <input type="radio" name="founder" id="q1_o4">Liaquat Ali Jinah
    </fieldset>
    </div><br>
    <br>
    <br>

    <div>
        <fieldset>
            <p>Who is national poet of Pakistan?</p>
            <input type="radio" name="national_poet" id="q2_o1">Allama Iqbal
            <input type="radio" name="national_poet" id="q2_o2">Manzoor Kapri
            <input type="radio" name="national_poet" id="q2_o3">Quaid-e-Azam
            <input type="radio" name="national_poet" id="q2_o4">Liaquat Ali Jinah
        </fieldset>
        </div><br>
        <br>
        <br>


        <div>
            <fieldset>
                <p>Who is the writer of national anthem of Pakistan?</p>
                <input type="radio" name="anthem_poet" id="q3_o1">Allama Iqbal
                <input type="radio" name="anthem_poet" id="q3_o2">Hafiz Jalindheri
                <input type="radio" name="anthem_poet" id="q3_o3">Quaid-e-Azam
                <input type="radio" name="anthem_poet" id="q3_o4">Liaquat Ali Jinah
            </fieldset>
            </div><br>
            <br>
            <br>


            <div>
                <fieldset>
                    <p>what is the national animal of Pakistan?</p>
                    <input type="radio" name="national_animal" id="q4_o1">Peacock
                    <input type="radio" name="national_animal" id="q4_o2">Dog
                    <input type="radio" name="national_animal" id="q4_o3">Lion
                    <input type="radio" name="national_animal" id="q4_o4">Markhor
                </fieldset>
                </div><br>
                <br>
                <br>



                <div>
                    <fieldset>
                        <p>Who is the Prime Minister of Pakistan?</p>
                        <input type="radio" name="pm" id="q5_o1">Imran Khan
                        <input type="radio" name="pm" id="q5_o2">Manzoor Kapri
                        <input type="radio" name="pm" id="q5_o3">Quaid-e-Azam
                        <input type="radio" name="pm" id="q5_o4">Liaquat Ali Jinah
                    </fieldset>
                    </div><br>
                    <br>
                    <br>



                    <div>
                        <fieldset>
                            <p>what is the area of pakistan in square km?</p>
                            <input type="radio" name="pk_sq_km" id="q6_o1">1,96,096 sq km
                            <input type="radio" name="pk_sq_km" id="q6_o1">5,05,095 sq km
                            <input type="radio" name="pk_sq_km" id="q6_o1">7,96,096 sq km
                            <input type="radio" name="pk_sq_km" id="q6_o1">2,96,096 sq km
                        </fieldset>
                        </div><br>
                        <br>
                        <br>


                        <div>
                            <fieldset>
                                <p>Who is the first prime minister of Pakistan?</p>
                                <input type="radio" name="first_PM" id="q7_o1">Liaquat Ali
                                <input type="radio" name="first_PM" id="q7_o2">Zulfiqar Ali Bhutto
                                <input type="radio" name="first_PM" id="q7_o3">Quaid-e-Azam
                                <input type="radio" name="first_PM" id="q7_o4">Manzoor Kapri
                            </fieldset>
                            </div><br>
                            <br>
                            <br>



                            <div>
                                <fieldset>
                                    <p>Which was the first capital of Pakistan?</p>
                                    <input type="radio" name="first_Capital" id="q8_o1">Karachi
                                    <input type="radio" name="first_Capital" id="q8_o2">Islamabad
                                    <input type="radio" name="first_Capital" id="q8_o3">Hydrabad
                                    <input type="radio" name="first_Capital" id="q8_o4">Quetta
                                </fieldset>
                                </div><br>
                                <br>
                                <br>



                                <div>
                                    <fieldset>
                                        <p>Who is the first woman prime minister of Pakistan?</p>
                                        <input type="radio" name="first_womanPM" id="q9_o1">Shoukat Khanam
                                        <input type="radio" name="first_womanPM" id="q9_o2">Shamshad Akhta
                                        <input type="radio" name="first_womanPM" id="q9_o3">Benazir Bhutto
                                        <input type="radio" name="first_womanPM" id="q9_o4">Liaquat Ali Jinah
                                    </fieldset>
                                    </div><br>
                                    <br>
                                    <br>




                                    <div>
                                        <fieldset>
                                            <p>which is the current capital of Pakistan?</p>
                                            <input type="radio" name="founder" id="">Islamabad
                                            <input type="radio" name="founder" id="">Karachi
                                            <input type="radio" name="founder" id="">Hydrabad
                                            <input type="radio" name="founder" id="">Lahore
                                        </fieldset>
                                        </div><br>
                                        <br>
                                        <br>

                                        <button onclick="check()">Results</button>


    <script src="app.js"></script>
</body>
</html>

Answer 3

使用 querySelector 可以更轻松地完成示例：

// Javascript (important I need a solution in this code)


function checkQuestion(questionName, answerID) {
  if(questionName == null || answerID == null) return;

  const answer = document.getElementById(answerID);
  const question = document.querySelector(`input[name="${questionName}"]:checked`);

  if(answer == null || question == null) return;

  return answer.id === question.id;
}
function updateScore(name, score, isCorrect) {
  if(isCorrect == null) return score;

  if(isCorrect) {
    document.querySelectorAll(`input[name="${name}"]:not(:checked)`).forEach(input => input.disabled = true);
    return score + 1;
  }
  else alert("wrong answer");

  return score;
}

function check() {
  let score = 0;

  // question no1
  const nameQ1 = 'founder'
  const validQ1 = checkQuestion(nameQ1, 'q1_o3');
  score = updateScore(nameQ1, score, validQ1);

  // question no2
  const nameQ2 = 'national_poet';
  const validQ2 = checkQuestion(nameQ2, 'q2_o1');
  score = updateScore(nameQ2, score, validQ2);

  // question no3
  const nameQ3 = 'anthem_poet'
  const validQ3 = checkQuestion(nameQ3, 'q3_o2');
  score = updateScore(nameQ3, score, validQ3);

  // question no4
  const nameQ4 = 'national_animal'
  const validQ4 = checkQuestion(nameQ4, 'q4_o4');
  score = updateScore(nameQ4, score, validQ4);

  // question no5
  const nameQ5 = 'pm';
  const validQ5 = checkQuestion(nameQ5, 'q5_o1');
  score = updateScore(nameQ5, score, validQ5);

  // question no6
  const nameQ6 = 'pk_sq_km'
  const validQ6 = checkQuestion(nameQ6, 'q6_o1');
  score = updateScore(nameQ6, score, validQ6);

  // question no7
  const nameQ7 = 'first_PM';
  const validQ7 = checkQuestion(nameQ7, 'q7_o1');
  score = updateScore(nameQ7, score, validQ7);

  // question no8
  const nameQ8 = 'first_Capital';
  const validQ8 = checkQuestion(nameQ8, 'q8_o1');
  score = updateScore(nameQ8, score, validQ8);

  // question no9
  const nameQ9 = 'first_womanPM';
  const validQ9 = checkQuestion(nameQ9, 'q9_o3');
  score = updateScore(nameQ9, score, validQ9);

  // question no9
  const nameQ10 = 'founder2';
  const validQ10 = checkQuestion(nameQ10, 'q10_o1');
  score = updateScore(nameQ10, score, validQ10);

  //display result
  const ab = document.querySelector('.ab') || ((e) => {
    e.classList.add('ab');
    document.body.appendChild(e)
    return e;
  })(document.createElement("h3"));
  ab.innerText = score;
}

/* *{
    padding: 0px;
    margin: 0px;

} */

body{
    margin: 1em;
    color: white;
    background-color: #222;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

fieldset{
    border-radius: 15px;
    text-align: center;
}

h3{
    background-color: cornsilk;
    color: blue;
    width: 10vw;
    height: 5vh;
    text-align: center;
    position: relative;
    left: 45%;
}
input[type=radio]:disabled ~ label {
  color: gray;
}

<h1>Quiz Application</h1>

<div>
  <fieldset>
    <p>Who is the founder of Pakistan?</p>
    <input type="radio" name="founder" id="q1_o1"><label>Allama Iqbal</label>
    <input type="radio" name="founder" id="q1_o2"><label>Manzoor Kapri</label>
    <input type="radio" name="founder" id="q1_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="founder" id="q1_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>

<div>
  <fieldset>
    <p>Who is national poet of Pakistan?</p>
    <input type="radio" name="national_poet" id="q2_o1"><label>Allama Iqbal</label>
    <input type="radio" name="national_poet" id="q2_o2"><label>Manzoor Kapri</label>
    <input type="radio" name="national_poet" id="q2_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="national_poet" id="q2_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>


<div>
  <fieldset>
    <p>Who is the writer of national anthem of Pakistan?</p>
    <input type="radio" name="anthem_poet" id="q3_o1"><label>Allama Iqbal</label>
    <input type="radio" name="anthem_poet" id="q3_o2"><label>Hafiz Jalindheri</label>
    <input type="radio" name="anthem_poet" id="q3_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="anthem_poet" id="q3_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>


<div>
  <fieldset>
    <p>what is the national animal of Pakistan?</p>
    <input type="radio" name="national_animal" id="q4_o1"><label>Peacock</label>
    <input type="radio" name="national_animal" id="q4_o2"><label>Dog</label>
    <input type="radio" name="national_animal" id="<label>q4_o3"><label>Lion</label>
    <input type="radio" name="national_animal" id="q4_o4"><label>Markhor</label>
  </fieldset>
</div><br>
<br>
<br>



<div>
  <fieldset>
    <p>Who is the Prime Minister of Pakistan?</p>
    <input type="radio" name="pm" id="q5_o1"><label>Imran Khan</label>
    <input type="radio" name="pm" id="q5_o2"><label>Manzoor Kapri</label>
    <input type="radio" name="pm" id="q5_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="pm" id="q5_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>



<div>
  <fieldset>
    <p>what is the area of pakistan in square km?</p>
    <input type="radio" name="pk_sq_km" id="q6_o1"><label>1,96,096 sq km</label>
    <input type="radio" name="pk_sq_km" id="q6_o1"><label>5,05,095 sq km</label>
    <input type="radio" name="pk_sq_km" id="q6_o1"><label>7,96,096 sq km</label>
    <input type="radio" name="pk_sq_km" id="q6_o1"><label>2,96,096 sq km</label>
  </fieldset>
</div><br>
<br>
<br>


<div>
  <fieldset>
    <p>Who is the first prime minister of Pakistan?</p>
    <input type="radio" name="first_PM" id="q7_o1"><label>Liaquat Ali</label>
    <input type="radio" name="first_PM" id="q7_o2"><label>Zulfiqar Ali Bhutto</label>
    <input type="radio" name="first_PM" id="q7_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="first_PM" id="q7_o4"><label>Manzoor Kapri</label>
  </fieldset>
</div><br>
<br>
<br>



<div>
  <fieldset>
    <p>Which was the first capital of Pakistan?</p>
    <input type="radio" name="first_Capital" id="q8_o1"><label>Karachi</label>
    <input type="radio" name="first_Capital" id="q8_o2"><label>Islamabad</label>
    <input type="radio" name="first_Capital" id="q8_o3"><label>Hydrabad</label>
    <input type="radio" name="first_Capital" id="q8_o4"><label>Quetta</label>
  </fieldset>
</div><br>
<br>
<br>



<div>
  <fieldset>
    <p>Who is the first woman prime minister of Pakistan?</p>
    <input type="radio" name="first_womanPM" id="q9_o1"><label>Shoukat Khanam</label>
    <input type="radio" name="first_womanPM" id="q9_o2"><label>Shamshad Akhtar</label>
    <input type="radio" name="first_womanPM" id="q9_o3"><label>Benazir Bhutto</label>
    <input type="radio" name="first_womanPM" id="q9_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>




<div>
  <fieldset>
    <p>which is the current capital of Pakistan?</p>
    <input type="radio" name="founder2" id=""><label>Islamabad</label>
    <input type="radio" name="founder2" id=""><label>Karachi</label>
    <input type="radio" name="founder2" id=""><label>Hydrabad</label>
    <input type="radio" name="founder2" id=""><label>Lahore</label>
  </fieldset>
</div><br>
<br>
<br>

<button onclick="check()">Results</button>

如何获得所有 got 元素的单击按钮的结果？

How to get results on single button clicks with all got elements?

html

javascript

css

javascript-objects

dom-events