如何將更新的對象信息添加回對象數組中的特定索引中？ （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();
});