测验提交时答案未被记录的问题排查与代码求助

我的测验会持续循环，直到触发endQuiz函数。我想实现的功能是：用户选中答案后，判断该答案的ID是否与数组中的正确答案匹配——通过调用selectedAnswer函数获取选中的答案，之后在nextQuestion函数中与filteredQuestions[randomQuestion].answer对比，若匹配则增加分数。以下是我编写的代码：

JavaScript 代码 #

let easyDifficulty = document.getElementById("easy-diff");
let mediumDifficulty = document.getElementById("medium-diff");
let hardDifficulty = document.getElementById("hard-diff");
let difficulty = document.getElementById("difficulty");
let difficultyLevel = "";
let submitBtn = document.getElementById("submit");
let questionCounter = 1;
let maxQuestion = 10;

let questions = [{
  question: `Al Pacino starred in the 1975 film Dog Day Afternoon that is the true story of a 
bank robbery gone bad. Where did the attempted robbery take place?`,
  a: `Chicago`,
  b: `Los Angeles`,
  c: `Boston`,
  d: `New York`,
  answer: `d`,
  difficulty: `hard`,
},
{
question: `Al Pacino and Robert De Niro have starred in a total of four movies together, can you name the film that they first shared screen time in?`,
a: `Righteous Kill`,
b: `Heat`,
c: `The Godfather Part II`,
d: `The Irishman`,
answer: `b`,
difficulty: `hard`,
  },
  {
question: `Al Pacino has starred in the The Godfather Trilogy, can you name the charter he portrays?`,
a: `Fredo Corleone`,
b: `Michael Corleone`,
c: `Tom Hagen`,
d: `Sonny Corleone`,
answer: `b`,
difficulty: `medium`,
  },
  {
question: `Al Pacino starred in the 1973 film Serpico that was director by which director?`,
a: `Sidney Lumet`,
b: `David Lean`,
c: `Mel Brooks`,
d: `Alfred Hitchcock`,
answer: `a`,
difficulty: `medium`,
  },
  {
question: `Al Pacino starred in 2019 film The Irishman, can you pick the actor who doesn't co-star in the film`,
a: `Robert De Niro`,
b: `Christopher Walken`,
c: `Joe Pesci`,
d: `Harvey Keitel`,
answer: `b`,
difficulty: `easy`,
  },
  {
question: `Al Pacino portrays Michael Corleone in the Godfather Trilogy that was directed by which director?`,
a: `George Lucas`,
b: `Stanley Kubrick`,
c: `Francis Ford Coppola`,
d: `Roman Polanski`,
answer: `c`,
difficulty: `easy`,
  }
 ]

let pickDifficulty = () => {
if (easyDifficulty.checked) {
difficultyLevel = "easy";
} else if (mediumDifficulty.checked) {
difficultyLevel = "medium";
} else if (hardDifficulty.checked) {
difficultyLevel = "hard";
}
};

function displayQuestion(quizQuestion, quiz) {
  quizQuestion.querySelector("#question").innerText = quiz.question;
  quizQuestion.querySelector("#a-answer").innerText = quiz.a;
  quizQuestion.querySelector("#b-answer").innerText = quiz.b;
  quizQuestion.querySelector("#c-answer").innerText = quiz.c;
  quizQuestion.querySelector("#d-answer").innerText = quiz.d;
}

difficulty.addEventListener("change",() => {
pickDifficulty();
const filteredQuestions = questions.filter((question) => 
question.difficulty === difficultyLevel);
const randomQuestion = Math.floor(Math.random() 
*filteredQuestions.length);
const quiztemplate = document.querySelectorAll(".quiz");
const quizparent = quiztemplate[0].parentNode;
quiztemplate.forEach((qq) => quizparent.removeChild(qq));
let quizQuestion = 
quizparent.appendChild(quiztemplate[0].cloneNode(true));
displayQuestion(quizQuestion, filteredQuestions[randomQuestion]);
//filteredQuestions.splice(randomQuestion, 1);
},true);

let answers = document.querySelectorAll(".answer");

function selectedAnswer() {
  let answer = undefined;

  answers.forEach((answers) => {
    if (answers.checked) {
      answer = answers.id;
    }
  });
  return answer;
}

let score = 0;

function nextQuestion() {

  if (questionCounter >= maxQuestion) {
    endQuiz();
  } else {
    const quiztemplate = document.querySelectorAll(".quiz");
    const quizparent = quiztemplate[0].parentNode;
    quiztemplate.forEach((qq) => quizparent.removeChild(qq));
    const quizquestion = quizparent.appendChild(quiztemplate[0].cloneNode(true));

    const filteredQuestions = questions.filter((question) =>
      question.difficulty === difficultyLevel);
    const randomQuestion = Math.floor(Math.random() * filteredQuestions.length);
    //filteredQuestions.splice(randomQuestion, 1);

    displayQuestion(quizquestion, filteredQuestions[randomQuestion]);
  }

  let answer = selectedAnswer();
  const filteredQuestions = questions.filter((question) => question.difficulty ===
    difficultyLevel);
  const randomQuestion = Math.floor(Math.random() * filteredQuestions.length);

  if (answer) {
    if (answer === filteredQuestions[randomQuestion].answer) {
      score++;
      document.getElementById(
        "score-counter"
      ).innerHTML = `<h3>Score:${score} / ${maxQuestion}</h3>`;
    }
  }
  }
  submitBtn.addEventListener("click", nextQuestion);

HTML 代码 #

<div id="difficulty" class="center">
    <div>
        <input type="radio" name="difficulty" id="easy-diff" 
    value="easy">
        <label for="easy-diff">Easy</label>
    </div>
    <div>
        <input type="radio" name="difficulty" id="medium-diff" 
    value="medium">
        <label for="medium-diff">Medium</label>
    </div>
    <div>
        <input type="radio" name="difficulty" id="hard-diff" 
    value="hard">
        <label for="hard-diff">Hard</label>
    </div>
</div>

<div id="question-holder" class="hide">
  <div id="question-counter"></div>
  <div id="score-counter"></div>
  <p id="post"></p>
  <div class="quiz">
    <h4 id="question">Question placement</h4>
    <ul id="answer-holder">
      <li>
        <label for="a" id="a-answer">possible answer</label>
        <input type="radio" name="answer" id="a" class="answer">
      </li>
      <li>
        <label for="b" id="b-answer">possible answer</label>
        <input type="radio" name="answer" id="b" class="answer">
      </li>
      <li>
        <label for="c" id="c-answer">possible answer</label>
        <input type="radio" name="answer" id="c" class="answer">
      </li>
      <li>
        <label for="d" id="d-answer">possible answer</label>
        <input type="radio" name="answer" id="d" class="answer">
      </li>
    </ul>
  </div>
  <button id="submit" class="btn">Submit</button>
  </div>

内容的提问来源于stack exchange，提问作者Huey O'Brien