Question

我正在创建一个AddressBook，我希望能够在创建一个联系人之后对其进行编辑。

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

select
name,
place,
count(*) filter (where TS >= now()::date - 7) last_week,
count(*) filter (where TS >= now()::date - 30) last_month
from sampleTable group by name, place order by name, place

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

 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 = ""
};

这里有用于创建联系人的HTML表单以及将要存储的ul。

感谢。

Answer 1

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

==是[{Scott, Smith, Sepulveda 112, 678587587}]
您的数组被声明为Object，同时您对其进行了引用是AddressBook

我已修改您的代码以更正语法问题并对其进行更新以遵循现代标准和最佳做法。

对于编辑，有几种方法可以解决。您可以在每个地址旁边放置一个编辑按钮，以便于了解阵列中的哪个对象需要更新。在这里，我对它进行了简化以便进行演示，这样您就可以看到编辑实际上是如何发生的。

请参阅注释以获得解释：

＆＃13;

addressBook

＆＃13;

// Get references to DOM elements you'll need just once
const frm = document.querySelector("form");
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");

// Set up event handlers in JavaScript, not in HTML
btnSubmit.addEventListener("click", storeFormInfos);
btnEdit.addEventListener("click", editContact);

var addressBook = [];    

function storeFormInfos() {

  // Create a new object that uses the values from the elements
  var contact = {
    "First name": fName.value,
    "Last name": lName.value,
    "Address": address.value,
    "Phone": phone.value
  };

  addressBook.push(contact);     // Put object into array
  displayContacts(addressBook);  // Update the UI to show list
  frm.reset();                   // Reset the form fields
}

function displayContacts(data) {
  contactListNode.innerHTML = ""; // Clear out previous list

  // Loop over the objects in the array
  addressBook.forEach(function(contact){
    var li = document.createElement('li');  // Create a bullet element
    var stringContent = "";                 // Will hold text for bullet
    
    // Loop over properties of object
    for(var prop in contact){
      // Write text based on property name and value
      stringContent += " " + prop + ": " + contact[prop];
    }
    li.textContent = stringContent;   // Set string as text of bullet
    contactListNode.appendChild(li);  // Add bullet to list
  });
}

function editContact(){
  var idx = prompt("Which contact (by number) do you wish to edit?");
  
  // Did user enter a valid index?
  if(addressBook[idx-1]){
    var newLastName = prompt("What is the new last name?");
    addressBook[idx-1]["Last name"] = newLastName;      // Update address book
  } else { alert("That's not a valid index!"); }
  displayContacts(addressBook);
}

＆＃13;

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

1 个答案: