Javascript 如何编辑以前使用联系人表单创建的联系人？

我正在创建一个通讯录，我希望在创建联系人后能够对其进行编辑

这是我显示联系人的代码：

 var AddressBook = [{Scott, Smith, Sepulveda 112, 678587587}];     

 var displayContacts = function (data) {

  var contactListNode = document.getElementById('contactList');
  while (contactListNode.firstChild) {
    contactListNode.removeChild(contactListNode.firstChild);
  };

  for (i = 0; i < data.length; i++) {
    var li = document.createElement('li');
    var contactInfo = document.createTextNode(
      "Name: " + data[i].firstname + " " +
      data[i].lastname + " Address: " +
      data[i].address + " Phone: " +
      data[i].phone
    )

    li.appendChild(contactInfo);
    li.setAttribute('id', i);
    li.setAttribute('onclick', 'deleteContact()');
    document.getElementById('contactList').appendChild(li);
  }
};

var storeFormInfos = function () {

  var contact = {
    firstname: document.getElementById('firstname').value,
    lastname: document.getElementById('lastname').value,
    address: document.getElementById('address').value,
    phone: document.getElementById('phone').value
  };

  addressBook.push(contact);
  displayContacts(addressBook);

  document.getElementById('firstname').value = "",
    document.getElementById('lastname').value = "",
    document.getElementById('address').value = "",
    document.getElementById('phone').value = ""
};

var AddressBook=[{Scott，Smith，Sepulveda 112678587587}]；
var displayContacts=功能（数据）{
var contactListNode=document.getElementById（'contactList'）；
while（contactListNode.firstChild）{
contactListNode.removeChild（contactListNode.firstChild）；
};
对于（i=0；i

我将var AddressBook视为displayContacts（）的数据

名字：

姓氏：

地址：

电话：




提交

这里有一个用于创建联系人的HTML表单，以及存储联系人的ul

---

谢谢。

首先，您有一些语法错误：

• [{Scott，Smith，Sepulveda 112678587587}]

  对于

  对象是无效语法

• 您的数组声明为

  地址簿

  ，而您对它的引用 是

  addressBook

我修改了您的代码以纠正语法问题，并根据现代标准和最佳实践对其进行了更新

对于编辑，有几种方法。您可以在每个地址旁边放置一个编辑按钮，这样可以很容易地知道数组中需要更新的对象。在这里，为了演示，我将其简化了一点，这样您就可以看到编辑实际上是如何进行的

有关解释，请参见注释：

//只需一次即可获取对DOM元素的引用
const frm=document.querySelector（“表单”）；
const contactListNode=document.getElementById（'contactList'）；
const fName=document.getElementById（'firstname'）；
const lName=document.getElementById（'lastname'）；
const address=document.getElementById（'address'）；
const phone=document.getElementById（'phone'）；
const btnEdit=document.getElementById（“btnEdit”）；
const btnSubmit=document.getElementById（“btnSubmit”）；
//用JavaScript而不是HTML设置事件处理程序
btnSubmit.addEventListener（“单击”，存储信息）；
btnEdit.addEventListener（“单击”，编辑联系人）；
var addressBook=[]；
函数storeFormInfo（）{
//创建一个使用元素值的新对象
var触点={
“名字”：fName.value，
“姓氏”：lName.value，
“地址”：Address.value，
“Phone”：Phone.value
};
addressBook.push（contact）；//将对象放入数组
displayContacts（addressBook）；//更新UI以显示列表
frm.reset（）；//重置表单字段
}
功能显示联系人（数据）{
contactListNode.innerHTML=“；//清除以前的列表
//在数组中的对象上循环
地址簿.forEach（功能（联系人）{
var li=document.createElement（'li'）；//创建项目符号元素
var stringContent=“；//将保存项目符号的文本
//对象的循环属性
用于（接触中的var prop）{
//基于属性名称和值编写文本
stringContent+=“”+prop+”：“+联系[prop]；
}
li.textContent=stringContent；//将字符串设置为项目符号的文本
contactListNode.appendChild（li）；//将项目符号添加到列表中
});
}
函数editContact（）{
var idx=提示（“您希望编辑哪个联系人（按号码）”；
//用户是否输入了有效的索引？
if（地址簿[idx-1]）{
var newLastName=prompt（“新的姓氏是什么？”）；
通讯簿[idx-1][“姓氏”]=newLastName；//更新通讯簿
}else{alert（“那不是有效的索引！”）；}
显示联系人（通讯录）；
}

名字：

姓氏：

地址：

电话：




提交

数据似乎是一个数组，正在传递给

显示联系人

，因此这就是数据所在的位置，也就是需要更改以更改数据的位置。您应该显示设置和填充

数据的附加代码以及适用的HTML。您到底想做什么？显示用于显示联系人的代码，但要求输入用于编辑联系人的代码。到目前为止你试过什么？您还可以提供一些示例数据吗？@ScottMarcus我已经添加了用于编辑联系人和数据的功能。但是您仍然没有添加设置/填充实际数组
地址簿的代码，也请添加相关的HTML。@ScottMarcus例如，我想做的事情是能够修改姓氏联系人的姓名储存了从史密斯到马库斯的通讯录。
<div id="addContactForm">
  <div>
    First name:<br>
    <input type="text" id="firstname">
  </div>
  <div>
    Last name:<br>
    <input type="text" id="lastname">
  </div>
  <div>
    Address:<br>
    <input type="text" id="address">
  </div>
  <div>
    Phone:<br>
    <input type="text" id="phone">
  </div>
  <br><br>
</div>
<button onclick="storeFormInfos()">Submit</button>

<ul id="contactList">

</ul>