JavaScript点击Start Quiz按钮加载测验题目功能实现问题

你现有代码跑不通的核心原因有两个：

• 不存在你选中的<questions>标签，document.querySelector("questions")拿不到任何DOM节点
• 绑定给按钮的createQuizAction函数没有实际渲染逻辑，是空实现

直接按下面的步骤修改即可，计时、判分功能可以后续在这个基础上扩展： #

1. 先把你之前声明但未使用的infoEl配置为题目展示容器，在首页初始化阶段插入页面：

// 补全infoEl配置，作为题目挂载容器
infoEl.setAttribute('id', 'quiz-container');
infoEl.setAttribute('style', 'width: 60%; margin: 30px auto; text-align: center;');
body.appendChild(infoEl);

2. 替换空的createQuizAction函数，实现点击后清空首页内容、逐题渲染题目和选项的逻辑，额外加了题目索引变量用来控制切题，后续做判分、计时都可以基于这个结构扩展：

// 记录当前答题进度，初始为第一题
let currentQuestionIndex = 0;

var createQuizAction = function () {
  // 点击开始后清空首页原有欢迎内容
  h1El.remove();
  h3El.remove();
  buttonEl.remove();

  // 单题渲染函数，切题时可复用
  function renderCurrentQuestion() {
    // 清空上一题内容
    infoEl.innerHTML = '';
    const currentQ = questions[currentQuestionIndex];

    // 插入题干
    const questionTitle = document.createElement('h2');
    questionTitle.textContent = `${currentQuestionIndex + 1}. ${currentQ.question}`;
    infoEl.appendChild(questionTitle);

    // 遍历插入所有选项按钮
    currentQ.choices.forEach(choiceText => {
      const choiceBtn = document.createElement('button');
      choiceBtn.textContent = choiceText;
      choiceBtn.setAttribute('style', 'display: block; width: 80%; margin: 10px auto; padding: 8px; cursor: pointer;');
      
      // 选项点击占位逻辑，后续可在这里加答案校验、扣分、切题、计时等逻辑
      choiceBtn.addEventListener('click', () => {
        if (currentQuestionIndex < questions.length - 1) {
          currentQuestionIndex++;
          renderCurrentQuestion();
        } else {
          infoEl.innerHTML = '<h2>Quiz Finished!</h2>'
        }
      })

      infoEl.appendChild(choiceBtn);
    })
  }

  // 渲染第一题
  renderCurrentQuestion();
}

注意你现有题库存在一个小bug：第三题的answer字段写的是"All of the above"，但选项里的文本是小写开头的"all of the above"，大小写不匹配后续做答案校验会判错，记得统一文本内容。

修改后完整可运行代码 #

直接替换你原有代码即可运行：

var body = document.body;
var h1El = document.createElement('h1');
var h3El = document.createElement('h3');
var infoEl = document.createElement('div')
var buttonEl = document.createElement('button');

//Using variables to display text and append elements to the body
h1El.textContent = 'Welcome to the JavaScript Quiz!';
h1El.setAttribute('style', 'margin:auto; width:100%; padding:50px 0px 0px 0px; text-align:center;');
body.appendChild(h1El);

h3El.textContent = 'This quiz is timed! Incorrect answers will impact your final score!';
h3El.setAttribute('style', 'margin:auto; width:50%; padding:0px 0px 20px 0px; text-align:center;');
body.appendChild(h3El);

buttonEl.textContent = "Start Quiz";
buttonEl.setAttribute('style', 'width: 50%; margin-left:25%; margin-right:25%; text-align:center; padding:10px; cursor:pointer;');
body.appendChild(buttonEl);

// 初始化题目容器
infoEl.setAttribute('id', 'quiz-container');
infoEl.setAttribute('style', 'width: 60%; margin: 30px auto; text-align: center;');
body.appendChild(infoEl);


//Start of quiz questions
var questions = [
    {
        question: "What is JavaScript?",
        choices: ["Coffee Maker", "Text Editor", "Programming Language"],
        answer: "Programming Language"
    },
    {
        question: "What are JavaScript Data Types?",
        choices: ["String, Variable, Content","Number, String, Boolean, Object, Undefined", "Math.floor, isCorrect, Array"],
        answer: "Number, String, Boolean, Object, Undefined"
    },
    {
        question: "Which symbol is used for comments in JavaScript?",
        choices: ["//", "/*", "*/", "all of the above"],
        answer: "all of the above"
    },
    {
        question: "What are all of the types of pop up boxes available in JavaScript?",
        choices: ["alert, confirm, prompt", "cardboard,foam,ice", "windows", "all of the above"],
        answer: "alert, confirm, prompt"
    },
    {
        question: "What are the main for loops in JavaScript?",
        choices: ["for, for/in, while", "if, for, null, string, while", "for, do...while, for/in, while"],
        answer: "for, do...while, for/in, while"
        
    }
]

let currentQuestionIndex = 0;

//Creating a function that will iterate through questions
var createQuizAction = function () {
  h1El.remove();
  h3El.remove();
  buttonEl.remove();

  function renderCurrentQuestion() {
    infoEl.innerHTML = '';
    const currentQ = questions[currentQuestionIndex];

    const questionTitle = document.createElement('h2');
    questionTitle.textContent = `${currentQuestionIndex + 1}. ${currentQ.question}`;
    infoEl.appendChild(questionTitle);

    currentQ.choices.forEach(choiceText => {
      const choiceBtn = document.createElement('button');
      choiceBtn.textContent = choiceText;
      choiceBtn.setAttribute('style', 'display: block; width: 80%; margin: 10px auto; padding: 8px; cursor: pointer;');
      choiceBtn.addEventListener('click', () => {
        if (currentQuestionIndex < questions.length - 1) {
          currentQuestionIndex++;
          renderCurrentQuestion();
        } else {
          infoEl.innerHTML = '<h2>Quiz Finished!</h2>'
        }
      })
      infoEl.appendChild(choiceBtn);
    })
  }

  renderCurrentQuestion();
}


buttonEl.addEventListener("click", createQuizAction);

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