如何訪問二維數組中的項目？

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);
   }
}