JavaScript汽车测验交互故障求助：答案选择逻辑异常

核心问题 #

选择答案后需实现：

• 显示对错提示信息
• 隐藏答案选项
• 显示Next按钮
  点击Next按钮后需实现：
• 重新显示答案选项
• 隐藏Next按钮和提示信息
  以上逻辑未正常执行。

问题分析 #

1. 答案选项未隐藏：选择答案后未对#answers添加隐藏类
2. 提示信息显示异常：#correct和#wrong默认未隐藏，导致选择答案后两者同时显示
3. resetState函数语法错误：answers.removeChild与参数换行，无法正确移除旧答案按钮
4. 提示信息未重置：点击Next后未隐藏#message及重置#correct/#wrong状态
5. 数据不完整：第11题缺少correct字段，导致判断逻辑失效
6. 事件绑定冗余：每次渲染题目都重复绑定按钮点击事件

修复后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车识别测验</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div id="container">
        <div id="message" class="hide">
            <div id="correct" class="hide">
                <i class="fas fa-check-circle"></i>
                <h1>答对啦！</h1>
                <p id="correct-answer"></p>
            </div>
            <div id="wrong" class="hide">
                <i class="fa-solid fa-circle-xmark"></i>
                <h1>答错了！</h1>
                <p id="actual-answer"></p>
            </div>
        </div>
        <div id="content">
            <img src="" alt="汽车图片" id="image">
            <div class="text">
                <div id="stats"></div>
                <div id="question" class="hide"></div>
                <div id="answers" class="hide"></div>
                <div class="controls">
                    <button id="start-btn" class="start-btn btn">开始测验</button>
                    <button id="next-btn" class="hide btn">下一题</button>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分 #

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#container {
    width: 100vw;
    height: 100vh;
    background-color: #081536;
    display: flex;
    justify-content: center;
    align-items: center;
}

#content {
    width: 700px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#message {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

#correct, #wrong {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background-color: #081536;
    border-radius: 10px;
}

#correct h1, #correct p, #wrong h1, #wrong p {
    color: white;
}

#correct i {
    color: #4CAF50;
    font-size: 50px;
}

#wrong i {
    color: #f44336;
    font-size: 50px;
}

#content img {
    width: 400px;
    height: 250px;
    object-fit: cover;
}

.text {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.hide {
    display: none !important;
}

#answers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.btn {
    width: 250px;
    height: 50px;
    outline: none;
    border-radius: 5px;
    border: 1px solid white;
    color: white;
    background: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: rgba(255,255,255,0.1);
}

#start-btn, #next-btn {
    background-color: orange;
    border: none;
}

#start-btn:hover, #next-btn:hover {
    background-color: #ff9800;
}

JavaScript部分 #

const questions = [
    {
        question: "先来道简单的，你能认出这款高端SUV吗？",
        image: "images/jaguar.jpg",
        answers: ["捷豹E-Pace", "保时捷Cayenne", "奔驰GLA"],
        correct: "捷豹E-Pace"
    },
    {
        question: "你能认出这是宝马哪一系列吗？",
        image: "images/bmw8.jpg",
        answers: ["宝马6系", "宝马3系", "宝马8系"],
        correct: "宝马8系"
    },
    {
        question: "再来一款SUV...",
        image: "images/duster.jpg",
        answers: ["达契亚Duster", "MINI Countryman", "Jeep Renegade"],
        correct: "达契亚Duster"
    },
    {
        question: "你能认出这款新款轿车吗？",
        image: "images/genesis.jpg",
        answers: ["名爵HS", "捷尼赛思G80", "奥迪A7"],
        correct: "捷尼赛思G80"
    },
    {
        question: "你能认出这款家用SUV吗？",
        image: "images/outlander.jpg",
        answers: ["现代胜达", "起亚索兰托", "三菱欧蓝德PHEV"],
        correct: "三菱欧蓝德PHEV"
    },
    {
        question: "现在来款紧凑型SUV...",
        image: "images/ford.jpg",
        answers: ["福特Puma", "保时捷Macan", "日产Juke"],
        correct: "福特Puma"
    },
    {
        question: "你能猜出这是哪款德国掀背车吗？",
        image: "images/audi3.jpg",
        answers: ["奔驰A级", "奥迪A3 Sportback", "宝马1系"],
        correct: "奥迪A3 Sportback"
    },
    {
        question: "嗯，这款呢... ",
        image: "images/renault.jpg",
        answers: ["雷诺Zoe", "DS 3", "日产Micra"],
        correct: "雷诺Zoe"
    },
    {
        question: "这是现代哪款车型？",
        image: "images/hyundaikona.jpg",
        answers: ["现代i10", "现代Ioniq", "现代Kona"],
        correct: "现代Kona"
    }, 
    {
        question: "这是哪款掀背车？",
        image: "images/mazda2.jpg",
        answers: ["福特福克斯", "马自达2", "日产Micra"],
        correct: "马自达2"
    },
    {
        question: "你能认出这款高端轿车吗？",
        image: "images/jaguarxe.jpg",
        answers: ["捷豹XE", "宝马3系", "奔驰E级"],
        correct: "捷豹XE"
    },
    {
        question: "这是哪款SUV？",
        image: "images/jeep.jpg",
        answers: ["路虎发现", "Jeep指南者", "起亚索兰托"],
        correct: "Jeep指南者"
    },
    {
        question: "这是福特哪款车型？",
        image: "images/fiesta.jpg",
        answers: ["Puma", "Kuga", "Fiesta ST"],
        correct: "Fiesta ST"
    },
    {
        question: "你能认出这款玛莎拉蒂吗？",
        image: "images/maserati.jpg",
        answers: ["Ghibli", "Levante", "Quattroporte"],
        correct: "Ghibli"
    },
    {
        question: "你能猜出这是路虎哪款车型吗？",
        image: "images/rangerover.jpg",
        answers: ["揽胜", "极光", "卫士"],
        correct: "揽胜"
    },
    {
        question: "这是哪款新款混动微型车？",
        image: "images/fiat.jpg",
        answers: ["MINI Hatchback", "菲亚特500", "雷诺Twingo"],
        correct: "菲亚特500"
    },
    {
        question: "这款斯柯达车型是什么？",
        image: "images/skoda.jpg",
        answers: ["明锐", "柯米克", "速派"],
        correct: "明锐"
    },
    {
        question: "你能认出这款沃尔沃吗？",
        image: "images/volvo.jpg",
        answers: ["XC40", "XC90", "XC60"],
        correct: "XC40"
    },
    {
        question: "这是大众哪款车型？",
        image: "images/golf.jpg",
        answers: ["Arteon", "高尔夫", "T-Roc"],
        correct: "高尔夫"
    },
    {
        question: "这是哪款掀背车？",
        image: "images/corsa.jpg",
        answers: ["沃克斯豪尔Corsa", "沃克斯豪尔Astra", "沃克斯豪尔Adam"],
        correct: "沃克斯豪尔Corsa"
    }
]

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionEl = document.getElementById('question')
const answersContainer = document.getElementById('answers')
const messageEl = document.getElementById('message')
const correctMsgEl = document.getElementById('correct')
const wrongMsgEl = document.getElementById('wrong')
const imageEl = document.getElementById('image')
const statsEl = document.getElementById('stats')
const actualAnswerEl = document.getElementById('actual-answer')

let questionNr = 0

startButton.addEventListener("click", startGame)
nextButton.addEventListener("click", () => {
    questionNr++
    setNextQuestion()
})

function startGame() {
    startButton.classList.add('hide')
    questionEl.classList.remove('hide')
    answersContainer.classList.remove('hide')
    questionNr = 0
    setNextQuestion()
}

function setNextQuestion() {
    resetState()
    if (questionNr >= questions.length) {
        questionEl.textContent = "测验结束！"
        answersContainer.classList.add('hide')
        startButton.textContent = "重新开始"
        startButton.classList.remove('hide')
        return
    }
    showQuestion(questions[questionNr])
}

function showQuestion(question) {
    questionEl.textContent = question.question
    imageEl.src = question.image
    statsEl.textContent = `${questionNr + 1}/${questions.length}`
    
    answersContainer.innerHTML = ''
    question.answers.forEach(answer => {
        const button = document.createElement('button')
        button.textContent = answer
        button.classList.add('btn')
        button.addEventListener('click', () => handleAnswerSelect(answer, question.correct))
        answersContainer.appendChild(button)
    })
}

function handleAnswerSelect(selectedAnswer, correctAnswer) {
    messageEl.classList.remove('hide')
    if (selectedAnswer === correctAnswer) {
        correctMsgEl.classList.remove('hide')
    } else {
        wrongMsgEl.classList.remove('hide')
        actualAnswerEl.textContent = `正确答案是：${correctAnswer}`
    }
    answersContainer.classList.add('hide')
    nextButton.classList.remove('hide')
}

function resetState() {
    nextButton.classList.add('hide')
    messageEl.classList.add('hide')
    correctMsgEl.classList.add('hide')
    wrongMsgEl.classList.add('hide')
    actualAnswerEl.textContent = ''
    answersContainer.classList.remove('hide')
    while (answersContainer.firstChild) {
        answersContainer.removeChild(answersContainer.firstChild)
    }
}

关键修复点 #

1. 给#correct和#wrong添加默认hide类，确保每次只显示对应提示
2. 修复resetState函数的语法错误，正确移除答案按钮
3. 选择答案后添加隐藏逻辑，隐藏选项并显示Next按钮
4. 点击Next时重置所有状态，隐藏提示并重新显示选项
5. 补全缺失的correct字段，修复判断逻辑
6. 重构事件绑定方式，避免重复绑定
7. 添加测验结束的收尾逻辑
8. 优化视觉样式，提升交互体验

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