Javascript 循环中动态创建的DOM元素被覆盖，并失去对当前数据值的跟踪

抱歉，如果标题不清楚，但我还是个新手，经常不知道如何清楚地表达我的编程问题。无论如何

我正在做一个测验应用程序。测验应用程序有一个控制器对象，该对象有一个问题递增的方法，如果答案正确，则当前分数递增。然后我有另一个功能，用问题和答案选项填充屏幕。问题和答案在数组中，所以我创建ul、li元素，并在循环中循环它们，用问题值填充新创建的DOM元素

现在的问题是，如果我在循环中动态地为答案选择创建LI元素，那么无论我的答案是否正确，测验分数都保持在0。如果我在循环外部创建LI元素，然后在循环内部填充其innerHTML值，我可以跟踪当前分数，但它只创建了一个LI元素，因此如果我有两个或多个答案选择，则在该LI元素内部只显示一个。一些代码：

function Quiz(questions) {
  this.questions = questions
  this.score = 0;
  this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
  return this.questions[this.questionIndex];
}

Quiz.prototype.guess = function(answer) {

  if (this.getQuestionIndex().isCorrectAnswer(answer)) {

    this.score++;
  }
    this.questionIndex++;
}

function Question(theQuestion, theChoices, theCorrectAnswer) {
  this.theQuestion = theQuestion;
  this.theChoices = theChoices;
  this.theCorrectAnswer = theCorrectAnswer;
}

Question.prototype.isCorrectAnswer = function(choice) {
    return this.theCorrectAnswer === choice;
}

let thequestion = [
  new Question("Which one of the three is a programming language?", ["Javascript", "HTML", "CSS"], "Javascript"),
  new Question("Is NodeJS is a front end or back end framework?", ["Back end", "Front End"], "Back end"),
  new Question("Is JAVA object oriented language?", ["Yes", "No"], "Yes")
]

var quiz = new Quiz(thequestion);


function populate() {

  if (quiz.isEnded()) {
    console.log("finished");
    showScores();
  } else {
    var questionTextField = document.getElementById("questions");
    questionTextField.innerHTML = quiz.getQuestionIndex().theQuestion;

    var choicesField = document.getElementById("options");
    var choices = quiz.getQuestionIndex().theChoices;

    var ul = document.createElement("UL");
    choicesField.appendChild(ul);
    for (var i = 0; i < choices.length; i++) {
      var li = document.createElement("LI");
      ul.appendChild(li);
      li.innerHTML = choices[i];
      guess(choices[i]);
    }

    ul.addEventListener("click", function() {
      choicesField.removeChild(ul);
    })
    console.log(quiz.score);
  }
}

function guess(guess) {
  var optionsToClick = document.getElementById("options");
  optionsToClick.onclick = function(e) {
    quiz.guess(guess);
    populate();
  }
}

功能测验（问题）{
这个问题
这个分数=0；
该指数=0；
}
quick.prototype.getQuestionIndex=函数（）{
返回此.questions[this.questionIndex]；
}
quick.prototype.guess=函数（答案）{
if（this.getQuestionIndex（）.isCorrectAnswer（answer））{
这个是.score++；
}
这个.questionIndex++；
}
功能问题（问题、选择、正确答案）{
this.theQuestion=theQuestion；
this.theChoices=theChoices；
this.theCorrectAnswer=正确答案；
}
Question.prototype.isCorrectAnswer=函数（选项）{
返回此选项。正确答案===选项；
}
让问题=[
新问题（“三种语言中哪一种是编程语言？”、[“Javascript”、“HTML”、“CSS”]、“Javascript”），
新问题（“NodeJS是前端还是后端框架？”，[“后端”、“前端”]，“后端”），
新问题（“JAVA是面向对象语言吗？”，[“是”、“否”]，“是”）
]
var测验=新测验（问题）；
函数填充（）{
if（quick.isEnded（））{
控制台日志（“完成”）；
showScores（）；
}否则{
var questionTextField=document.getElementById（“问题”）；
questionTextField.innerHTML=quick.getQuestionIndex（）。问题；
var choicesField=document.getElementById（“选项”）；
var choices=quick.getQuestionIndex（）。选项；
var ul=document.createElement（“ul”）；
choicesField.appendChild（ul）；
for（var i=0；i

正如我所说，使用这段代码，我从单个LI元素的数组中获得屏幕上的所有答案选项，但当我单击正确答案时，分数不会增加。我相信这是因为在每次循环迭代中，LI都会被覆盖，所以分数总是为0，对吗

如果在循环外部创建LI元素：

var ul = document.createElement("UL");
        choicesField.appendChild(ul);
var li = document.createElement("LI");
        for (var i = 0; i < choices.length; i++) {
          ul.appendChild(li);
          li.innerHTML = choices[i];
          guess(choices[i]);
        } 

var ul=document.createElement（“ul”）；
choicesField.appendChild（ul）；
var li=document.createElement（“li”）；
for（var i=0；i

当我单击正确答案时，分数会增加，但在3个或更多答案选项中，我在屏幕上只看到一个（数组中的最后一个），因为在循环外部只有一个LI元素，而在循环内部，它在每次迭代中都会被新的问题-答案选项覆盖

那么我该如何解决这个问题呢？我希望动态创建与每个问题答案选项相同数量的答案按钮，并跟踪每个按钮单击和新循环迭代的当前分数，而不将分数重置为0。这就是闭包的问题吗

我考虑的解决方案是遵循观察者模式，用当前分数值通知观察者（循环中新创建的LI元素）（我可以将它们保留在数组中），并通过在它们上设置数据属性用这些值更新当前LI？因此，它的工作原理类似于将数组中的旧分数值与新分数值进行比较，并在每次迭代时更新循环中新创建的LI元素。这样他们就可以跟踪比分了

我不知道这是否有道理，也不知道我是否想得太多。希望我能得到一些建议，让我走上正确的轨道