JavaScript问卷计分功能点击后始终显示0/10故障排查求助

你代码里存在4个核心逻辑错误，是导致得分永远为0的原因：

• 渲染单选/复选框时，没有给input设置value属性，选中后无法获取对应的选项标识（a/b/c/d）
• displayScore函数中，你仅把选择器字符串赋值给了userAnswer，没有调用DOM查询接口获取真实的选中元素
• 得分计算逻辑中，你固定取answerContainer[0]作为用户答案，永远只会用第一题的答案和所有题的正确答案做对比
• 复选框的用户答案没有做排序处理，用户选中顺序和正确答案顺序不一致时会被误判为答错

修复后的完整代码 #

(function () {
  function renderQuiz() {
    const quizContainer = document.querySelector("#quizContainer");
    let quizStr = '';
    quiz.forEach((obj, questionIndex) => {
      let answerStr = '';
      for (const option in obj.options) {
        if (Array.isArray(obj.correct)) {
          answerStr += `
                  <li>
                  <label>
                  <input 
                  value="${option}"
                  type="checkbox"
                  name="question-${questionIndex}"
                  >
                  ${obj.options[option]}
                  </label>
                  </li> `;
        } else {
          answerStr += `
                  <li>
                  <label>
                  <input 
                  value="${option}"
                  type="radio"
                  name="question-${questionIndex}"
                  >
                  ${obj.options[option]}
                  </label>
                  </li> `;
        }
      }
      quizStr += `
          <form>
              <h3>${obj.question}</h3>
              <ul>
              ${answerStr}
              </ul>
          </form> `;
    })
    quizContainer.innerHTML = quizStr;
  }

  const resultsContainer = document.querySelector("#results");
  function displayScore() {
    const answerContainer = [];
    quiz.forEach((obj, questionIndex) => {
      // 实际查询选中的元素
      const selectedEls = document.querySelectorAll(`input[name="question-${questionIndex}"]:checked`);
      let answers = Array.from(selectedEls).map(el => el.value);
      // 单选题取第一个值即可
      if(!Array.isArray(obj.correct)){
        answers = answers[0] ?? '';
      }
      answerContainer.push(answers);
    });

    let score = 0;
    for (let i = 0; i < quiz.length; i++) {
      let correctAnswer = quiz[i].correct;
      // 取对应下标的用户答案
      let userChoice = answerContainer[i];
      if (Array.isArray(correctAnswer)) {
        // 排序后再比较，忽略选中顺序
        if (JSON.stringify(correctAnswer.sort()) === JSON.stringify(userChoice.sort())) {
          score++;
        }
      } else if (correctAnswer === userChoice) {
        score++;
      }
    }
    resultsContainer.innerHTML = `<p>You scored : ${score} / ${quiz.length}</p>`;
  }

  let quiz = [
    {
      question: "I vilket land produceras det mest kaffe?",
      options: {
        a: "Kolombia",
        b: "Brasilien",
        c: "Indonesien",
        d: "Vietnam"
      },
      correct: "b"
    },
    {
      question: "I vilket land konsumeras det mest kaffe?",
      options: {
        a: "Italien",
        b: "Belgien",
        c: "Finland",
        d: "Kanada"
      },
      correct: "c"
    },
    {
      question: "Ordet kaffe betyder vin på det språket det härstammar ifrån. Vilket språk är det?",
      options: {
        a: "Arabiska",
        b: "Ryska",
        c: "Turkiska",
        d: "Grekiska"
      },
      correct: "a"
    },
    {
      question: "Hur många kalorier finns i en kopp kaffe?",
      options: {
        a: "1",
        b: "5",
        c: "14",
        d: "7"
      },
      correct: "a"
    },
    {
      question: "Vem upptäckte kaffet?",
      options: {
        a: "En bonde",
        b: "En fåraherde",
        c: "En munk",
        d: "En jägare"
      },
      correct: "b"
    },
    {
      question: "På vilket djurs avföring är världens dyraste kaffe gjord på?",
      options: {
        a: "Mus",
        b: "Fågel",
        c: "Apa",
        d: "Katt"
      },
      correct: "d"
    },
    {
      question: "När kom kaffet till Sverige?",
      options: {
        a: "1700-talet",
        b: "1800-talet",
        c: "1400-talet",
        d: "1600-talet"
      },
      correct: "d"
    },
    {
      question: "Vilka två av dessa alternativ är typer av kaffe?",
      options: {
        a: "Arabica",
        b: "Mocca",
        c: "Robusta",
        d: "Java"
      },
      correct: ["a", "c"]
    },
    {
      question: "Välj de enda två delstaterna i U.S.A som odlar kaffebönor?",
      options: {
        a: "Georgia",
        b: "Kalifornien",
        c: "Hawaii",
        d: "Florida"
      },
      correct: ["b", "c"]
    },
    {
      question: "Hur förvaras kaffe som bäst? Välj två sätt.",
      options: {
        a: "Svalt",
        b: "I kylskåp",
        c: "Öppet",
        d: "Mörkt"
      },
      correct: ["a", "d"]
    }
  ];

  renderQuiz();
  let checkButton = document.querySelector("#check");
  checkButton.addEventListener("click", displayScore)
})();

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