检查点击的按钮是否正确，然后创建（响应）；

Question

对造成的麻烦表示歉意。我正在尝试学习创建一个简单的测验。我试图让 javascript “监听”单击的 按钮的值 ，如果它 与答案 一致，我希望它 创建一个 console.log(“正确”) ”。

我一直在尝试多种方法来尝试提示响应，包括创建一个函数来单独检查是否单击了哪个按钮然后提示响应。但是，我认为这是不可行的，因为一旦正确回答了第一个问题，那么我不知道如何继续为问题 2 制作所谓的“正确按钮”来提示响应。 “正确按钮”一直卡在“问题 1 的正确按钮”上。因此，我正在尝试不同的方法，如果按钮的值与答案对齐然后提示响应，我会尝试使用该方法。

const myTextArea = document.getElementById("question")
const btnGlobal = document.querySelectorAll("button")
const btnOne = document.getElementById("button-one")
const btnTwo = document.getElementById("button-two")
const btnThree = document.getElementById("button-three")
const btnFour = document.getElementById("button-four")


let questions = [{
    question: "What did you eat today?",
    choiceA: "Fried Noodle",
    choiceB: "Chinese Dumpling",
    choiceC: "Chicken Rice",
    choiceD: "Pan Mee",
    answer: "B",
},
{
    question: "What did you drink today?",
    choiceA: "Carbonate Drinks",
    choiceB: "3 Layer Tea",
    choiceC: "Coffee",
    choiceD: "Milo",
    answer: "D",
},
{
    question: "What did you do today?",
    choiceA: "Jogging",
    choiceB: "Swimming",
    choiceC: "Watching Movie",
    choiceD: "Sleeping",
    answer: "C",
}]

let currentQuestion = 0;

function ansCheck() {
    var selectAns = questions[currentQuestion].answer
    if (target.value == selectAns) {
        console.log("correct");
    } else {
        console.log("wrong");
    }
}

    <div class="main-body">
        <p id="question">Input your question here.</p>
        <div class="btn-list">
            <button class="button" onclick="ansCheck()" id="button-one" value="A" type="submit">Choice A</button>
            <button class="button" onclick="ansCheck()" id="button-two" value="B" type="submit">Choice B</button>
            <button class="button" onclick="ansCheck()" id="button-three" value="C" type="submit">Choice C</button>
            <button class="button" onclick="ansCheck()" id="button-four" value="D" type="submit">Choice D</button>
        </div>

Answer 1

首先：这样更改 html 按钮：

<button class="button" onclick="ansCheck('A')">Choice A</button>
<button class="button" onclick="ansCheck('B')">Choice B</button>
<button class="button" onclick="ansCheck('C')">Choice C</button>
<button class="button" onclick="ansCheck('D')">Choice D</button>

然后更改功能：

function ansCheck(userAnswer) {
    var selectAns = questions[currentQuestion].answer
    if (userAnswer == selectAns) {
        console.log("correct");
    } else {
        console.log("wrong");
    }
}

Answer 2

将

this

传递到内联点击处理程序中

<button class="button" onclick="ansCheck(this);" id="button-one" value="A" type="submit">Choice A</button>
<button class="button" onclick="ansCheck(this);" id="button-two" value="B" type="submit">Choice B</button>
<button class="button" onclick="ansCheck(this);" id="button-three" value="C" type="submit">Choice C</button>
<button class="button" onclick="ansCheck(this);" id="button-four" value="D" type="submit">Choice D</button>

从单击事件处理程序中检索当前单击的目标

function ansCheck(target) {
    var selectAns = questions[currentQuestion].answer
    if (target.value == selectAns) {
        console.log("correct");
    } else {
        console.log("wrong");
    }
}