在 JavaScript 数组测验中出现未定义错误

Getting undefined error at JavaScript array quiz

我正在尝试使用数组中的数据进行类似多项选择的简单测验,但出现错误:TypeError: Cannot read property '0' of undefined

可能的选择应为4,正确答案为第一选择。我尝试在网上搜索解决方案,但我不知道是什么导致了错误以及如何解决它:

var masterlist = [
  ["Indonesia", "Jakarta"],
  ["Malaysia", "Kuala Lumpur"],
  ["Philippines", "Manila"],
  ["Singapore", "Singapore"],
  ["Thailand", "Bangkok"],
  ["Vietnam", "Hanoi"]
];

function randomNoRepeats(array) {
  var copy = array.slice(0);
  return function() {
    if (copy.length < 1) {
      copy = array.slice(0);
    }
    var index = Math.floor(Math.random() * copy.length);
    var item = copy[index];
    copy.splice(index, 1);
    return item;
  };
}
var chooser = randomNoRepeats(masterlist); //randomize choices
//console.log(chooser());

var quizArea = document.getElementById("test-area");

var a = []; // new empty array to store randomized items
var c = []; // new empty array to store randomized items (copy)
var b;
var correctAnswer;

for (var i = 0; i < masterlist.length; i++) {
  b = chooser();
  a.push(b);
}
c = a;
//console.log("a", a, a.length); // ERROR here; expected an array length of 6

for (var i = 0; i < masterlist.length; i++) {
  correctAnswer = c[i];

  var index = a.indexOf(correctAnswer); // remove correct answer from list of other/wrong choices
  a.splice(index, 1);

  var otherChoices = a.slice(0, 3); // choose only 3 wrong/other choices

  var question = document.createElement("p");
  question.innerHTML = "What is the capital of " + correctAnswer[0] + "?"; // ERROR

  var answers = document.createElement("p");
  answers.innerHTML = correctAnswer[1] + ", " + otherChoices[0][1] + ", " + otherChoices[1][1] + ", " + otherChoices[2][1]; // place correct answer at index 0; TypeError: Cannot read property '0' of undefined

  quizArea.appendChild(question);
  quizArea.appendChild(answers);

}
<div id="test-area"></div>

问题来自声明c = a;。它不复制数组。 ca 引用同一个数组对象。

这意味着 a.splice(index, 1) 行更改了 ac


这里的一个解决方案是在最后一个 for 循环.

中使用 a 的真实副本
for (var i = 0; i < masterlist.length; i++) {
  c = a.slice(0); // or c = [...a];
  
  // use `c` here
}

var masterlist = [
  ["Indonesia", "Jakarta"],
  ["Malaysia", "Kuala Lumpur"],
  ["Philippines", "Manila"],
  ["Singapore", "Singapore"],
  ["Thailand", "Bangkok"],
  ["Vietnam", "Hanoi"]
];

function randomNoRepeats(array) {
  var copy = array.slice(0);
  return function() {
    if (copy.length < 1) {
      copy = array.slice(0);
    }
    var index = Math.floor(Math.random() * copy.length);
    var item = copy[index];
    copy.splice(index, 1);
    return item;
  };
}
var chooser = randomNoRepeats(masterlist); //randomize choices
//console.log(chooser());

var quizArea = document.getElementById("test-area");

var a = []; // new empty array to store randomized items
var c;
var b;
var correctAnswer;

for (var i = 0; i < masterlist.length; i++) {
  b = chooser();
  a.push(b);
}
//console.log("a", a, a.length); // ERROR here; expected an array length of 6

for (var i = 0; i < masterlist.length; i++) {
  c = a.slice(0);

  correctAnswer = c[i];

  var index = c.indexOf(correctAnswer); // remove correct answer from list of other/wrong choices
  c.splice(index, 1);

  var otherChoices = c.slice(0, 3); // choose only 3 wrong/other choices
  
  var question = document.createElement("p");
  question.innerHTML = "What is the capital of " + correctAnswer[0] + "?"; // ERROR

  var answers = document.createElement("p");
  answers.innerHTML = correctAnswer[1] + ", " + otherChoices[0][1] + ", " + otherChoices[1][1] + ", " + otherChoices[2][1]; // place correct answer at index 0; TypeError: Cannot read property '0' of undefined

  quizArea.appendChild(question);
  quizArea.appendChild(answers);

}
<div id="test-area"></div>