如何实现点击选项按钮切换问答Div显示状态？HTML&JavaScript

问题分析 #

你的代码存在以下几个核心问题，导致点击选项无法正常切换题目：

• getElementsByClassName('box2 option')返回的是HTMLCollection类数组对象，不能直接调用addEventListener，必须遍历每个按钮单独绑定事件
• document.querySelector('.box3 .option')仅会选中容器内第一个选项按钮，其余三个按钮点击无响应
• HTML中未定义box5和box6容器，但JS中直接引用，会引发未定义错误
• 未设置初始样式隐藏题目容器，页面加载时所有题目会同时显示

修正后的完整代码 #

HTML（补充缺失的题目和结果页）

<div class="box box1">
    <h1>Awesome Quiz</h1>
    <p>Trivia Time 😁🤓!!!</p>
    <button id="start">Start</button>
</div>
<div class="quest box2">
    <h2>Awesome Quiz</h2>
    <p>Who was the first President of the United States?</p>
    <p>George Washington</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Thomas Jefferson</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>Thomas Edinson</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>I don't Know</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 1 of 5</p>
    </div>
</div>
<div class="quest box3">
    <h2>Awesome Quiz</h2>
    <p>What is Queen Elizabeth II's surname?</p>
    <p>Jason</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Windsor</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>Drakeford</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>William</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 2 of 5</p>
    </div>
</div>
<div class="quest box4">
    <h2>Awesome Quiz</h2>
    <p>What is the largest country in the world?</p>
    <p>Russia</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Canada</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>India</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>South Africa</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 3 of 5</p>
    </div>
</div>
<div class="quest box5">
    <h2>Awesome Quiz</h2>
    <p>Which planet is closest to the Sun?</p>
    <p>Venus</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Mercury</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>Mars</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>Earth</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 4 of 5</p>
    </div>
</div>
<div class="quest box6">
    <h2>Awesome Quiz</h2>
    <p>What is the chemical symbol for gold?</p>
    <p>Au</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Ag</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>Cu</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>Fe</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 5 of 5</p>
    </div>
</div>
<div class="box box7">
    <h1>Quiz Completed!</h1>
    <p>Thanks for playing 😊</p>
</div>

CSS（初始隐藏题目容器）

.quest, .box7 {
    display: none;
}
.box {
    text-align: center;
}

JavaScript（通用化切换逻辑）

// 获取核心元素
const startBtn = document.getElementById('start');
const introBox = document.querySelector('.box1');
const questBoxes = document.querySelectorAll('.quest');
const optionBtns = document.querySelectorAll('.option');
const finalBox = document.querySelector('.box7');

// 开始游戏逻辑
startBtn.addEventListener('click', () => {
    introBox.style.display = 'none';
    questBoxes[0].style.display = 'block';
});

// 选项点击通用逻辑
optionBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        // 找到当前按钮所属的题目容器
        const currentQuest = btn.closest('.quest');
        // 找到下一个题目容器
        const nextQuest = currentQuest.nextElementSibling;

        if (nextQuest && nextQuest.classList.contains('quest')) {
            // 还有下一题，切换显示
            currentQuest.style.display = 'none';
            nextQuest.style.display = 'block';
        } else {
            // 最后一题完成，显示结果页
            currentQuest.style.display = 'none';
            finalBox.style.display = 'block';
        }
    });
});

关键优化点 #

1. 用querySelectorAll获取所有选项按钮，通过forEach遍历绑定事件，确保每个按钮都能触发切换
2. 使用closest('.quest')快速定位当前按钮所属的题目容器，无需硬编码每个box的类名
3. 用nextElementSibling自动查找下一个容器，新增题目时无需修改JS逻辑
4. 补充了缺失的第4、5题和结果页容器，避免未定义错误
5. 通过CSS统一初始隐藏题目和结果页，保证页面加载时仅显示 intro 界面

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