Javascript Добавление данных в массив не работает достаточно хорошо

Question

Привет, у меня проблема с моим кодом. Надеюсь, что кто-нибудь может помочь мне с этим.

У меня есть 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);

}

Кажется, что с первого раза все работает нормально (сохраняет значения в объект, а затем в массив)но когда я изменяю текстовые поля и снова нажимаю кнопку, вместо сохранения новых значений в следующую позицию в массиве, он перезаписывает обе позиции с этим новым дублированным вводом

Answer 1

Это может быть проблемой области.Поместив объявление вашей персоны в вашу функцию, как предложил Марсело, вы можете решить эту проблемуВы думаете, что каждый раз клонируется новый объект, но на самом деле кажется, что этот же объект перезаписывается новыми значениями.Если вы запустите цикл for и каждый раз сохраняете свой итератор в массиве, вы обнаружите, что в итоге у вас будет только последнее значение.Так и идет.

Answer 2

просто инициируйте var внутри функции, чтобы иметь возможность обновлять их каждый раз, когда вы вызываете функцию

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

}

Answer 3

Это происходит потому, что у вас одна и та же ссылка на объект 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);

}