我已经检查了值，但是如何根据问题检查它？

Question

我有一个单选按钮的值，我想根据问题的答案来检查它。

我正在使用一系列问题，并且还设置了上一个和下一个按钮来循环浏览问题。

我已经阅读了这个关于输入的内容（如果有人觉得有帮助的话）：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

我会添加一个sn-p。

我尝试了各种语法

const submit = document.getElementById('submit');
submit.addEventListener("click", check);

const answeTo = arrayQuestion[i].answer;

function check(anwserTo) {

    var type = document.getElementsByName('rad');

    //Checks which button is selected
    if (type.checked == anwserTo) {
        alert('Well Done');
}}

在这里，我厌倦了将值存储在 const 中，然后对照当前问题检查答案：

const answeTo = arrayQuestion[i].answer;

function check(anwserTo) {

    var type = document.getElementsByName('rad');
    //Storing the value
    var answer = type.checked;
    //Checks which button is selected
    if (answer == anwserTo) {
    alert('Well Done');
}};

这是我正在使用的分解版本（下面的完整代码片段）

<js>
//Question constructor and example question
class Question {
    constructor(question, ansA, ansB, ansC, ansD, answer) {
        this.question = question;
        this.ansA = ansA;
        this.ansB = ansB;
        this.ansC = ansC;
        this.ansD = ansD;
        this.answer = answer;
    };

//Stored in a array with others
var questionOne = new Question('Where is Creete?', 'Barcalona', 'Greece', 'Dubi', 'Ireland', 'B');


//Function to check if the value of the radio button is correct


const submit = document.getElementById('submit');
submit.addEventListener("click", check);
const answeTo = arrayQuestion[i].answer;

function check(anwserTo) {

    var type = document.getElementsByName('rad');
    var answer = type.checked;
    //Checks which button is selected
    if (answer == anwserTo) {
        alert('Well Done');
    }


};

结果应该只是提醒问题已正确回答。

我没有收到任何错误。

class Question {
    constructor(question, ansA, ansB, ansC, ansD, answer) {
        this.question = question;
        this.ansA = ansA;
        this.ansB = ansB;
        this.ansC = ansC;
        this.ansD = ansD;
        this.answer = answer;
    };

    checkAns(ansSelected, answer) {
        if (ansSelected === answer) {
            console.log('Well Done')
        };
    };
};

//Questions
var questionOne = new Question('Where is Creete?', 'Barcalona', 'Greece', 'Dubi', 'Ireland', 'B');
var questionTwo = new Question('How many times have Liverppool won the Champions Legue?', '1', '4', '6', '5', 'C');
var questionThree = new Question('Where was the first Godfather in the mafia from?', 'Milan', 'Gunoa', 'Rome', 'Napoli', 'D');

//Index of the array with the questions array 
var i = 0;
const arrayQuestion = [questionOne, questionTwo, questionThree];
const arrayAns = [questionOne.answer, questionTwo.answer];

//Displaying the first index of the question array on load up
document.getElementById('question').innerHTML = arrayQuestion[i].question;
document.getElementById('rad1Label').innerHTML = arrayQuestion[i].ansA;
document.getElementById('rad2Label').innerHTML = arrayQuestion[i].ansB;
document.getElementById('rad3Label').innerHTML = arrayQuestion[i].ansC;
document.getElementById('rad4Label').innerHTML = arrayQuestion[i].ansD;



const submit = document.getElementById('submit');
submit.addEventListener("click", check);

const answeTo = arrayQuestion[i].answer;

function check(anwserTo) {

    var type = document.getElementsByName('rad');
    var answer = type.checked;
    //Checks which button is selected
    if (answer == anwserTo) {
        alert('Well Done');
    }


};






//Next button which cycles through the array and show the current question.
//With if statement to catch out of bound error
const n = document.getElementById('next');
n.addEventListener("click", next);

function next() {

    i++;

    if (i === arrayQuestion.length) {
        i = 0;
    };

    document.getElementById('question').innerHTML = arrayQuestion[i].question;
    document.getElementById('rad1Label').innerHTML = arrayQuestion[i].ansA;
    document.getElementById('rad2Label').innerHTML = arrayQuestion[i].ansB;
    document.getElementById('rad3Label').innerHTML = arrayQuestion[i].ansC;
    document.getElementById('rad4Label').innerHTML = arrayQuestion[i].ansD;

};


//Function to go back to previouse question
//With if statement to catch out of bound error
const p = document.getElementById('previous')
p.addEventListener("click", prev)

function prev() {

    i--;

    if (i === -1) {
        i = arrayQuestion.length - 1;
    };


    document.getElementById('question').innerHTML = arrayQuestion[i].question;
    document.getElementById('rad1Label').innerHTML = arrayQuestion[i].ansA;
    document.getElementById('rad2Label').innerHTML = arrayQuestion[i].ansB;
    document.getElementById('rad3Label').innerHTML = arrayQuestion[i].ansC;
    document.getElementById('rad4Label').innerHTML = arrayQuestion[i].ansD;


};

html {
  box-sizing: border-box;
  font-weight: 200;
}

*, *:before, *:after {
  box-sizing: inherit;
}

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

    <body>
        <form id="formEl">
            <h2 id="question"></h2>
            
            <input type="radio" id="rad1" name="rad" value='A'>
            <label for="rad1" id="rad1Label"></label>

            <input type="radio" id="rad2" name="rad" value='B'>
            <label for="rad2" id="rad2Label"></label>

            <input type="radio" id="rad3" name="rad" value='C'>
            <label for="rad3" id="rad3Label"></label>

            <input type="radio" id="rad4" name="rad" value='D'>
            <label for="rad4" id="rad4Label"></label>

            <button id="previous" type="button" class="userSelection">Previous</button>
            
            <button id="next" type="button" class="userSelection">Next</button>
            
            <button id="submit">Submit</button>

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

Answer 1

这里有一些问题。

首先，您使用函数 check(anwserTo) 作为 click 事件侦听器的回调，但是，您期望问题的答案作为该函数的参数，但事件侦听器提供了一个 @ 987654323@ 反对它。所以你需要以某种方式让你的函数知道当前问题的答案是什么，以便它可以检查用户输入。

其次，在同一函数的主体内，您将使用var type = document.getElementsByName('rad'); 获取所有单选按钮的数据，但这会返回一个数组，因此以下行var answer = type.checked; 不会返回您所期望的。相反，您应该遍历元素数组，找到选中了哪个单选按钮并将其存储在某个变量中，以便您最终可以根据当前问题的答案对其进行测试。

Answer 2

你想要这样的东西吗？

<p>How much is 1 + 1?</p>

<input type="radio" name="group-1" onclick="test(this)" value="1">
<label for="ans-1">1</label>

<input type="radio" name="group-1" onclick="test(this)" value="2">
<label for="ans-2">2</label>

<input type="radio" name="group-1" onclick="test(this)" value="3">
<label for="ans-3">3</label>

<script>
  const correctAnswer = 2
  
  const test = (element) => {
    if(element.value == correctAnswer) {
      alert("Right answer!")
    } else {
      alert("Wrong answer!")
    }
  }
</script>