javascript - 需要帮助加载带有用户输入的对象数组

Question

我正在尝试运行一个小程序，该程序根据用户在输入文本框中键入的内容将问题加载到对象数组中。这就是 HTML 的样子。 /image/BNdki.png

到目前为止我已经做到了这一点。我希望每次单击“添加问题”按钮时重复循环(该按钮执行“AddQuestion”函数)，因此我添加了“循环”变量，并添加了一个 for 循环来显示问题的标题。但似乎不起作用...

class questions {
constructor(question, cat, ans1, ans2, ans3, ans4) {
    this.question = question;
    this.cat = cat;
    this.ans = ans1;
    this.ans2 = ans2;
    this.ans3 = ans3;
    this.ans4 = ans4;
 }
}

loop = 0

function AddQuestions()
        {
            loop++;
            var question = new Array(10);

            title = document.getElementById("question").value;
            category = document.getElementById("category").value;
            answ1 = document.getElementById("ans1").value;
            answ2 = document.getElementById("ans2").value;
            answ3 = document.getElementById("ans3").value;
            answ4 = document.getElementById("ans4").value;

            question[loop] = new questions (title, category, ans1, ans2, 
ans3, ans4);
            console.log(question[loop].question);

            for ( i = 0 < question.length; i++;) {
            console.log(question[i].question);
}

        }

Answer 1

代码中存在某些错误。您正在启动loop与 0并在AddQuestions()内它会立即增加，并且您的新问题将添加到索引 1 处而不是0 。相反，在添加问题后增加循环变量。

声明for ( i = 0 < question.length; i++;) {是不正确的。应该是for ( i = 0; i < question.length; i++) {

在 AddQuestions() ， question 的数组(由于 question 是一个数组，因此将变量 question 重命名为 questions )使用固定 length 创建10 个元素。所以 for 循环 for ( i = 0; i < question.length; i++) {将迭代 empty元素也。相反，您可以使用 - var question = [] 创建一个数组;

而且每次question当 button 时设置为空数组单击，这将删除之前已插入的项目。相反，在函数外部声明一次数组 AddQuestions .

class questions {
  constructor(question, cat, ans1, ans2, ans3, ans4) {
    this.question = question;
    this.cat = cat;
    this.ans = ans1;
    this.ans2 = ans2;
    this.ans3 = ans3;
    this.ans4 = ans4;
  }
}

let loop = 0;
const question = [];

function AddQuestions() {
  title = document.getElementById("question").value;
  category = document.getElementById("category").value;
  answ1 = document.getElementById("ans1").value;
  answ2 = document.getElementById("ans2").value;
  answ3 = document.getElementById("ans3").value;
  answ4 = document.getElementById("ans4").value;

  question[loop] = new questions(title, category, answ1, answ2, answ3, answ4);

  for (i = 0; i < question.length; i++) {
    console.log(question[i].question);
  }
  loop++;
}

<input type="text" id="question">
<input type="text" id="category">
<input type="text" id="ans1">
<input type="text" id="ans2">
<input type="text" id="ans3">
<input type="text" id="ans4">
<button onclick="AddQuestions()">Click</button>