本文旨在指导开发者如何使用HTML和JavaScript实现一个简单的问答游戏页面，该页面包含多个问题，每个问题有多个选项按钮。点击选项按钮后，当前问题区域隐藏，下一个问题区域显示。文章将详细讲解实现思路、关键代码以及注意事项，帮助读者快速掌握该功能的实现方法。

页面结构（HTML）

首先，我们需要构建页面的基本HTML结构。每个问题及其选项都包含在一个独立的 div 容器中。 使用 box 类作为所有 div 的基础样式，并使用 box1、box2 等类来区分不同的问题区域。

    
Awesome Quiz
    
Trivia Time ??!!!
    Start


    
Awesome Quiz
    
Who was the first President of the United States?

    
George Washington
    SELECT ANSWER
    
Thomas Jefferson
    SELECT ANSWER
    
Thomas Edinson
    SELECT ANSWER
    
I don't Know
    SELECT ANSWER
    
        
Question 1 of 5
    


    
Awesome Quiz
    
What is Queen Elizabeth II's surname?

    
Jason
    SELECT ANSWER
    
Windsor
    SELECT ANSWER
    
Drakeford
    SELECT ANSWER
    
William
    SELECT ANSWER
    
        
Question 2 of 5
    


    
Awesome Quiz
    
What is the largest country in the world?

    
Russia
    SELECT ANSWER
    
Canada
    SELECT ANSWER
    
India
    SELECT ANSWER
    
South Africa
    SELECT ANSWER
    
        
Question 3 of 5
    

交互逻辑（JavaScript）

接下来，使用JavaScript来实现点击按钮后切换 div 显示的效果。

1. 获取元素：使用 document.querySelector 和 document.querySelectorAll 获取需要操作的HTML元素。 querySelector 返回匹配的第一个元素，而 querySelectorAll 返回所有匹配的元素列表。

2. 绑定事件监听器：为每个选项按钮绑定点击事件监听器。

3. 切换显示状态：在事件处理函数中，隐藏当前问题区域，显示下一个问题区域。

let start = document.querySelector('#start');
let intro = document.querySelector('.box1');
let box2 = document.querySelector('.box2');
let box3 = document.querySelector('.box3');
let box4 = document.querySelector('.box4');
let box5 = document.querySelector('.box5');
let box6 = document.querySelector('.box6');

start.addEventListener('click', function(){
    intro.style.display = 'none';
    box2.style.display = 'block';
})

// 获取box2下的所有option按钮
let select1 = document.querySelectorAll('.box2 .option');
// 循环绑定事件
select1.forEach(function(button) {
    button.addEventListener('click', function(){
        box2.style.display = 'none';
        box3.style.display = 'block';
    })
});

let select2 = document.querySelectorAll('.box3 .option');
select2.forEach(function(button) {
    button.addEventListener('click', function(){
        box3.style.display = 'none';
        box4.style.display = 'block';
    })
});

let select3 = document.querySelectorAll('.box4 .option');
select3.forEach(function(button) {
    button.addEventListener('click', function(){
        box4.style.display = 'none';
        box5.style.display = 'block';
    })
});

完整代码示例

将HTML和JavaScript代码整合在一起，得到完整的代码示例：

    
        
Awesome Quiz
        
Trivia Time ??!!!
        Start
    
    
        
Awesome Quiz
        
Who was the first President of the United States?

        
George Washington
        SELECT ANSWER
        
Thomas Jefferson
        SELECT ANSWER
        
Thomas Edinson
        SELECT ANSWER
        
I don't Know
        SELECT ANSWER
        
            
Question 1 of 5
        
    
    
        
Awesome Quiz
        
What is Queen Elizabeth II's surname?

        
Jason
        SELECT ANSWER
        
Windsor
        SELECT ANSWER
        
Drakeford
        SELECT ANSWER
        
William
        SELECT ANSWER
        
            
Question 2 of 5
        
    
    
        
Awesome Quiz
        
What is the largest country in the world?

        
Russia
        SELECT ANSWER
        
Canada
        SELECT ANSWER
        
India
        SELECT ANSWER
        
South Africa
        SELECT ANSWER
        
            
Question 3 of 5
        
    

    

注意事项和总结

• querySelector vs. querySelectorAll: querySelector 只返回匹配的第一个元素，而 querySelectorAll 返回所有匹配的元素列表。 在需要操作多个元素时，务必使用 querySelectorAll，并循环处理每个元素。
• 代码可维护性: 当问题数量增加时，手动编写每个问题的事件处理函数会变得繁琐且容易出错。 可以考虑使用循环或函数来动态生成事件处理函数，提高代码的可维护性。
• CSS样式: 为了实现更好的用户体验，可以添加CSS样式来美化页面，例如设置按钮的颜色、字体、间距等。
• 边界情况处理: 确保处理好边界情况，例如最后一个问题完成后，应该显示一个结束页面或者重新开始游戏。

通过本文的讲解，您应该能够使用HTML和JavaScript实现一个简单的问答游戏页面，并理解其中的核心概念和实现方法。 希望本文对您有所帮助！