我的JS代码运行异常 两题测验表单内容无法在中央div显示 求助修复

全部错误修改说明 #

• JS语法错误：原始quizQuestions对象定义格式错误，用=代替了对象属性赋值符:，多个题目没有用数组包裹，第二个题目选项的key4后遗漏冒号，对象、数组缺少闭合括号
• API调用错误：getElementByClassName拼写错误（正确为getElementsByClassName），传入参数多了类名前缀.，且该方法返回DOM集合不能直接绑定监听事件
• 业务逻辑错误：初始加载未主动渲染题目，反而将渲染逻辑绑定到quiz-container的点击事件，导致初始状态看不到题目；变量名拼写混乱，quizQuestions和quizQuestion混用；绑定事件时用了不存在的元素idsubmit2
• 结构错误：<h1>标题标签放在了<head>标签内，不符合HTML规范
• 样式错误：.quiz-container设置了4000px的不合理高度，按钮的margin-left: 900px会导致按钮超出常规视口范围
• 逻辑缺陷：选项和answer字段混在同一个alternatives对象内，遍历渲染时会把answer也当成选项输出；多道题的单选框没有设置不同的name属性，会导致多个题目只能选一个选项

修复后代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>巴西常识测验</title>
</head>
<body>
  <h1>QUIZ centred in Brazil</h1>
  <div class="quiz-container"></div>
  <div>
    <button type="button" id="submit-button">Evaluate</button>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

CSS代码 #

body {
  background: rgb(209, 29, 83);
  margin: 0;
  padding-bottom: 60px;
}

h1 {
  background: rgb(255, 184, 201);
  height: 60px;
  margin: 0;
  padding-left: 20px;
  padding-top: 20px;
  font-size: 45px;
  text-shadow: 3px 3px 9px;
  color: rgb(43, 29, 14);
}

.quiz-container {
  text-align: left;
  font-size: 25px;
  background: rgb(255, 209, 220);
  width: 700px;
  margin: auto;
  margin-top: 100px;
  box-shadow: 9px 9px 10px;
  padding: 20px;
  box-sizing: border-box;
}

button {
  display: block;
  margin: 20px auto 0;
  padding: 8px 16px;
  font-size: 18px;
}

.question-item {
  margin-bottom: 30px;
}

.question-title {
  font-weight: bold;
  margin-bottom: 15px;
}

.option-item {
  margin-bottom: 8px;
  font-size: 20px;
}

JS代码 #

// 修正题目结构，用数组存储多道题，answer提取为单独属性
const quizQuestions = [
  {
    question: "What is the capital of the state of Pará?",
    alternatives: {
      0: "São Paulo",
      1: "Guarulhos",
      2: "Campinas",
      3: "São Bernardo do Campo",
      4: "São José dos Campos",
      5: "Santo André",
      6: "Ribeirão Preto",
      7: "Belém"
    },
    answer: "7"
  },
  {
    question: "What is the capital of the state of Amapá?",
    alternatives: {
      0: "Osasco",
      1: "Sorocaba",
      2: "Mauá",
      3: "Macapá",
      4: "São José do Rio Preto",
      5: "Mogi das Cruzes",
      6: "Santos"
    },
    answer: "3"
  }
]

// 页面加载完成后自动渲染题目
window.addEventListener('DOMContentLoaded', renderQuiz)

function renderQuiz() {
  const container = document.querySelector('.quiz-container');
  let html = ''
  // 遍历所有题目渲染
  quizQuestions.forEach((quiz, index) => {
    html += `<div class="question-item">
              <div class="question-title">${index + 1}. ${quiz.question}</div>`
    // 渲染当前题目的所有选项
    for (const [key, value] of Object.entries(quiz.alternatives)) {
      // 不同题目用不同name属性，避免单选互斥
      html += `<div class="option-item"><input type="radio" name="choice_${index}" value="${key}"> ${value}</div>`
    }
    html += `</div>`
  })
  container.innerHTML = html
}

// 绑定提交按钮事件
document.getElementById('submit-button').addEventListener('click', function(event) {
  event.preventDefault();
  let correctCount = 0
  // 遍历所有题目判分
  quizQuestions.forEach((quiz, index) => {
    const selected = document.querySelector(`input[name="choice_${index}"]:checked`)
    if (selected && selected.value == quiz.answer) {
      correctCount++
    }
  })
  alert(`你答对了${correctCount}道题，共${quizQuestions.length}道题`)
})

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