实现简易Quiz：按钮点击答案校验与console.log输出问题求助

我正在开发一个简易Quiz，需求是让JavaScript监听被点击按钮的value，当该值与当前问题的答案匹配时，执行console.log("correct")。

之前尝试过单独检查点击按钮的方法，但第一题回答正确后，第二题的正确按钮无法正常触发响应，始终绑定第一题的正确按钮。现在换了思路，想通过按钮value与答案匹配来触发响应，但写的代码有问题，求解决：

我的代码 #

JavaScript代码 #

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");
    }
}

HTML代码 #

<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>
</div>

解决方案 #

你的代码主要有两个核心问题：

1. ansCheck函数里的target未定义，无法获取点击按钮的value值
2. 缺少题目渲染逻辑，页面不会显示题目内容，也无法切换下一题

以下是修复后的完整代码：

修改后的JavaScript代码 #

const questionEl = document.getElementById("question")
const btnList = document.querySelectorAll(".button")

let questions = [{
    question: "你今天吃了什么？",
    choiceA: "炒面",
    choiceB: "饺子",
    choiceC: "鸡饭",
    choiceD: "板面",
    answer: "B",
},
{
    question: "你今天喝了什么？",
    choiceA: "碳酸饮料",
    choiceB: "三层茶",
    choiceC: "咖啡",
    choiceD: "美禄",
    answer: "D",
},
{
    question: "你今天做了什么？",
    choiceA: "慢跑",
    choiceB: "游泳",
    choiceC: "看电影",
    choiceD: "睡觉",
    answer: "C",
}]

let currentQuestion = 0;

// 加载当前题目到页面
function loadQuestion() {
    const currentQ = questions[currentQuestion]
    questionEl.textContent = currentQ.question
    btnList[0].textContent = currentQ.choiceA
    btnList[1].textContent = currentQ.choiceB
    btnList[2].textContent = currentQ.choiceC
    btnList[3].textContent = currentQ.choiceD
}

// 校验答案
function ansCheck(btn) {
    const selectAns = questions[currentQuestion].answer
    if (btn.value === selectAns) {
        console.log("correct");
        // 答对后切换到下一题（如果还有剩余题目）
        if (currentQuestion < questions.length - 1) {
            currentQuestion++
            loadQuestion()
        } else {
            questionEl.textContent = "答题结束！"
            btnList.forEach(btn => btn.disabled = true)
        }
    } else {
        console.log("wrong");
    }
}

// 初始化加载第一题
loadQuestion()

修改后的HTML代码 #

<div class="main-body">
    <p id="question">Input your question here.</p>
    <div class="btn-list">
        <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>
    </div>
</div>

关键修改说明：

• 给ansCheck函数传递点击的按钮元素this，通过参数直接获取按钮的value值
• 添加loadQuestion函数，负责将当前题目和选项内容渲染到页面
• 增加答对后的自动切题逻辑，所有题目完成后禁用按钮并提示结束

内容的提问来源于stack exchange，提问作者luffyy