Question

您好我的代码有问题希望有人可以帮我解决。

我有一个HTML文件，其中包含两个带有id：name的文本框，另一个带有id：lname的文本框和一个提交按钮。当我按下按钮时，它执行此功能（功能添加），该功能位于单独的文件中。

onChange

它似乎第一次工作正常（它将值保存到对象然后进入数组）但是当我更改文本框并再次按下按钮时，而不是将新值保存到数组中的下一个位置它使用这个重复的新输入重写两个位置

Answer 1

这种情况正在发生，因为对于数组中的所有位置，您对对象person具有相同的引用。因此，每当您更改person的值时，它都会在其使用的所有位置进行更新。您必须为每个新的add操作创建一个引用。试试以下

function add(){
  person = {}; // -------------- Add this line here
  person.name = document.getElementById('name').value;
  person.lastname = document.getElementById('lname').value;
  people.push(person);
  console.table(people);

}

Answer 2

这可能是范围问题。通过像Marcelo建议的那样将你的person对象声明放在你的函数中，你可以解决这个问题。您每次都在考虑克隆一个新对象，但事实上似乎同一个对象被新值覆盖。如果你每次运行for循环并将迭代器保存到数组中，你会发现最终你只有最后一个值。它就是这样。

Answer 3

只需在函数内部启动var，这样每次调用函数时都可以更新它们

function add(){
  var person = {}, people = [];
  person.name = document.getElementById('name').value;
  person.lastname = document.getElementById('lname').value;
  people.push(person);
  console.table(people);

}

Javascript将数据添加到数组不能很好地工作

3 个答案: