如何访问二维数组中的项目？

Question

对于一个包含 5 个问题的多项选择测验，我有一个函数可以显示一个问题、创建四个列表项并在其中添加按钮。

我需要将答案选择文本放在按钮中。我有一个包含 5 个数组的数组，每个数组包含 4 个答案选择字符串。我正在努力寻找正确的方法来做到这一点。我尝试使用嵌套的 if 循环和 foreach() 并将按钮 textContent 设置为项目，但似乎无法使其工作。我需要访问第一个内部数组中的 4 个项目，然后在每次迭代时移动到下一个内部数组。

以下是我目前所拥有的。

   var list = document.getElementById("list");
   var btn = document.getElementById("start");
   var question = document.getElementById("question")

   var questionArray = 
   [“Question 1”, 
   “Question 2“,
   “Question 3”,
   “Question 4“,
   “Question 5“];

   var answerArray = 
   [[“answer”, "answer", "answer", "answer"], 
   ["answer", "answer", "answer", "answer"],
   ["answer", "answer", "answer", "answer"],
   ["answer", "answer", "answer", "answer"],
   ["answer", "answer", "answer", "answer"]];


function displayQuestion() {
   for (var i=0; i < questionArray.length; i++) {
       question.textContent = questionArray[i];
       createListItems();
       return;
   }
}

function createListItems() {
   for (var j=0; j < answerArray[0].length; j++) {
       var listItem = document.createElement("li");
       list.appendChild(listItem);
       var answerButton = document.createElement("button");
       listItem.appendChild(answerButton);
   }

}

Answer 1

你可以这样实现它：

function displayQuestion() {
   for (var i = 0; i < questionArray.length; i++) {
      (function(idx) {
         question.textContent = questionArray[idx];
         createListItems(idx);
      })(i);
   }
}

function createListItems(idx) {
   for (var j=0; j < answerArray[idx].length; j++) {
       var listItem = document.createElement("li");
       listItem.appendChild(document.createTextNode(answerArray[idx]));           
       var answerButton = document.createElement("button");
       listItem.appendChild(answerButton);
       list.appendChild(listItem);
   }
}