JavaScript - 通过输入字段将对象添加到数组的末尾

Question

我正在尝试动态地使用 JavaScript 将具有来自输入字段的值的对象添加到数组的末尾。唯一的问题是我正在尝试使用输入字段。这就是我想要发生的事情：

1. 用户在文本字段中输入内容
2. 我的程序已经为其添加了唯一 ID
3. 以对象的形式将其添加到数组的末尾
4. 继续向该数组添加对象

这是我想要在我的 JSON 文件中的内容：

{
  "list": [{
    "id": 0,
    "description": "Task #1 Description"
  }, {
    "id": 1,
    "description": "Task #2 Description"
  }, {
    "id": 3,
    "description": "Task #3 Description"
  }]
}

我目前得到的是：

{
  "list": [{
    "id": 0,
    "description": "Task #1 Description"
  }, ]
}

每次我添加一个新任务时，它都会替换已经存在的任务。

这是我的 JavaScript 代码：

  // This is the counter
  var indentification = 0;

  // This is the submit button
  var submit = document.getElementById("submit");

  // This is the text field
  var content = document.getElementById("text");

  submit.onclick = function() {
      id = indentification++;
      description = content.value;

      var task = {
          list: []
      }

      task.list.push({id, description});
      var jsonifyTask = JSON.stringify(task);
      fs.writeFile("tasks.json", jsonifyTask, "utf8");
  }

如果有人可以帮助我，我会非常感谢。我花了 小时 试图弄明白。谢谢！

Answer 1

问题出在这里：

var task = {
      list: []
  }
task.list.push({id, description});

每次您执行此操作时，您的列表都会变为空，然后添加新项目。

Answer 2

改成这个

  // This is the counter
  var indentification = 0;

  // This is the submit button
  var submit = document.getElementById("submit");

  // This is the text field
  var content = document.getElementById("text");
  var task = {
    list: []
  }
  submit.onclick = function() {
      id = indentification++;
      description = content.value;

      task.list.push({id, description});
      var jsonifyTask = JSON.stringify(task);
      fs.writeFile("tasks.json", jsonifyTask, "utf8"); // what're you doing here, browser do not allow write file to disk
  }

Answer 3

// This is the counter
var indentification = 0;

// This is the submit button
var submit = document.getElementById("submit");

// This is the text field
var content = document.getElementById("text");

submit.addEventHandler("click", function() {
    id = indentification++;
    description = content.value;
    task.list.push({id, description});
    var jsonifyTask = JSON.stringify(task);
    fs.writeFile("tasks.json", jsonifyTask, "utf8");
}

Answer 4

这里有几件事需要考虑：

1. 表单提交必须刷新页面并重置您的全局变量。因此，您需要防止点击提交时的默认操作。

2. （如前面的答案中所述）每次点击都会启动列表。您将需要在 onClick 函数之外初始化变量任务

   // This is the counter
   var indentification = 0;
   
   // This is the submit button
   var submit = document.getElementById("submit");
   
   // This is the text field
   var content = document.getElementById("text");
   //initialize outside the on click function
   var task = {
           list: []
      }
   
   submit.onclick = function(e) {
     //This prevents page refresh on form submission and preserves the global variable states
     e.preventDefault();
     id = indentification++;
     description = content.value;
   
   
   
     task.list.push({id, description});
     var jsonifyTask = JSON.stringify(task);
     fs.writeFile("tasks.json", jsonifyTask, "utf8");
   }
   

这有望解决您的问题。