Javascript向数组中添加数据效果不太好

嗨，我的代码有问题，希望有人能帮我

我有一个HTML文件，有两个id:name的文本框和另一个id:lname的文本框，还有一个提交按钮。当我按下按钮时，它执行这个（函数add），它位于一个单独的文件中

var person = {}, people = [];

function add(){

  person.name = document.getElementById('name').value;
  person.lastname = document.getElementById('lname').value;
  people.push(person);
  console.table(people);

}

---

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

这是因为数组中的所有位置都具有相同的对象

人

引用。因此，无论何时更改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);

}

---

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

只需在函数内部启动

var

，这样它就可以在每次调用函数时更新它们

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

}

---

在

add（）

的顶部，从

person={}

开始。或者更好的方法是使用局部变量而不是全局变量。感谢您的快速响应，我更正了我的代码，效果很好。@Marcelo-很高兴听到：）这是错误的。每次添加时，数组都会被重置，这意味着在任何时间点，数组中的最大值都将为1，而不是OP想要的值。