如何将更新的对象信息添加回对象数组中的特定索引？ (Javascript)

Question

我有一个练习应用程序，它应该接受新信息并将信息放入对象数组中。它还可以选择编辑数组中的特定数据。一切正常，直到我尝试将新信息重新插入到旧信息存储在数组中的位置。问题出现在 editObj 函数中。我删除了所有我知道存在的错误代码，并留下了我知道有效的代码。

//HTML elements
var table = document.querySelector('#list');
var main = document.querySelector('#main');
var form = document.querySelector('#form');
var userInput = document.querySelector('#userInput');
var addBtn = document.querySelector('#add');
var saveBtn = document.querySelector('#save');

//Object array
var Assignments = [ ];

//main function

var mainView = function() { 
  table.innerHTML = '';
  for(i = 0; i < Assignments.length; i++){
      //elements
      var row = document.createElement('tr');
      var data = document.createElement('td');
      var data2 = document.createElement('td');
      var data3 = document.createElement('td');
      var edit = document.createElement('td');
      var remove = document.createElement('td');
      var editBtn = document.createElement('button');
      var deleteBtn = document.createElement('button');
      //rendering
      data.innerHTML = Assignments[i].name;
      data2.innerHTML = Assignments[i].possible;
      data3.innerHTML = Assignments[i].earned;    
      //innerText
      editBtn.innerText = "Edit";
      deleteBtn.innerText = "Delete";
      //set attributes
      editBtn.setAttribute('index',i);
      deleteBtn.setAttribute('index',i);
      //appending
      edit.appendChild(editBtn);
      remove.appendChild(deleteBtn);
      row.appendChild(data);
      row.appendChild(data2);
      row.appendChild(data3);
      row.appendChild(edit);
      row.appendChild(remove);
      table.appendChild(row);
      //event listeners
      editBtn.addEventListener('click', editObj);
      deleteBtn.addEventListener('click', deleteObj);
      //unhide table
      main.style.display = '';
  }
};

//add form

var addObj = function() {
    main.style.display = 'none';
    form.style.display = '';
};

var saveObj = function(e) {
    e.preventDefault();
    var itmObj = {};
    var name = 'name';
    var pP = 'possible';
    var pE = 'earned';
    itmObj[name] = userInput.name.value;
    itmObj[pP] = userInput.pP.value;
    itmObj[pE] = userInput.pE.value;
    Assignments.push(itmObj);
    console.log(Assignments);
    form.style.display = 'none';
    mainView();
};

//editing functions

var editObj = function(e) {
    main.style.display = 'none';
    form.style.display = '';
    saveBtn.style.display = 'none';
    newSaveBtn.style.display = '';
    //get object
    var editing = e.currentTarget.getAttribute('index');
    userInput.name.value = Assignments[editing].name;
    userInput.pP.value = Assignments[editing].possible;
    userInput.pE.value = Assignments[editing].earned;
    //remove original from array
  Assignments.splice(editing, 1);
    //add new data to array


};

//delete

var deleteObj = function(e) {
    var removing = e.currentTarget.getAttribute('index');
    Assignments.splice(removing, 1);
    mainView();
};

//event listeners


addBtn.addEventListener('click', addObj);
userInput.addEventListener('submit', saveObj);

假设当前代码没有问题...如何将新的更新信息恢复为之前的索引值？

这是我尝试过的方法之一，并且 eventListener 不会在新按钮上触发：

var editObj = function(e) {
    main.style.display = 'none';
    form.style.display = '';
    saveBtn.style.display = 'none';
    //get object
    var editing = e.currentTarget.getAttribute('index');
    userInput.name.value = Assignments[editing].name;
    userInput.pP.value = Assignments[editing].possible;
    userInput.pE.value = Assignments[editing].earned;
    //remove original from array
  Assignments.splice(editing, 1);
    //add new data to array
     var editBtn = document.createElement('button');
     editBtn.innerText = 'Save New';
     form.appendChild(editBtn);
     editBtn.addEventListener('click', editTest);

//test editing

var editTest = function(e){
    console.log(editing);
    var newObj = {};
    var newName = 'name';
    var newpP = 'possible';
    var newpE = 'earned';
    newObj[newName] = userInput.name.value;
    newObj[newpP] = userInput.pP.value;
    newObj[newpE] = userInput.pE.value;
    Assignments.splice(editing, 0, newObj);
    form.style.display = 'none';
    form.removeChild(editBtn);
    saveBtn.style.display = '';
    mainView();
};

};

Answer 1

啊！修复。原来需要组合 editObj 和 editTest 函数。这是工作代码：

var editObj = function(e) {
    main.style.display = 'none';
    form.style.display = '';
    saveBtn.style.display = 'none';
    //get object
    var editing = e.currentTarget.getAttribute('index');
    userInput.name.value = Assignments[editing].name;
    userInput.pP.value = Assignments[editing].possible;
    userInput.pE.value = Assignments[editing].earned;
    //remove original from array
  Assignments.splice(editing, 1);
    //add new data to array
     var editBtn = document.createElement('button');
     editBtn.innerText = 'Save New';
     form.appendChild(editBtn);
     editBtn.addEventListener('click', function(e){
    console.log(editing);
    var newObj = {};
    var newName = 'name';
    var newpP = 'possible';
    var newpE = 'earned';
    newObj[newName] = userInput.name.value;
    newObj[newpP] = userInput.pP.value;
    newObj[newpE] = userInput.pE.value;
    Assignments.splice(editing, 0, newObj);
    form.style.display = 'none';
    form.removeChild(editBtn);
    saveBtn.style.display = '';
    mainView();
});