尝试将存储在数组中的对象属性显示在<ul>元素上

Question

我刚刚开始学习JS，我正在尝试做一些基础项目来巩固我从阅读，课程和教程以及诸如此类的东西中学到的知识。我正在尝试制作一个有4个输入的联系人列表：名字，姓氏，电子邮件和电话号码。我已经编写了这个部分并将参数传递给数组中的对象。我无法弄清楚的是如何显示联系对象。我想尝试将每个属性打印到无序列表中的列表项中但是我被困在这里，要么是因为我对DOM操作不够了解，要么因为我没有找到正确的方向

//this passes the text input as an object to the list array
var contactList = {
  list: [],

  addNew: function() {
    this.list.push({
      firstName: document.getElementById('firstname').value,
      lastName: document.getElementById('lastname').value,
      email: document.getElementById('emailAdd').value,
      phoneNumber: document.getElementById('phoneNumber').value
    });
  },
};

// this runs the addNew() function and clears the input fields afterwards
var handlers = {
  addContact: function() {
    contactList.addNew();

    document.getElementById('firstname').value = '';
    document.getElementById('lastname').value = '';
    document.getElementById('emailAdd').value = '';
    document.getElementById('phoneNumber').value = '';

    //      view.displayContact();
  },

};
//this is where i'm trying to display the contacts array
var view = {
  displayContact: function() {
    var contacts = document.getElementById('contactul');
    for (var i = 0; i < contactList.list.length; i++) {
      var li = document.createElement('li');

      contacts.appendChild(li);
      li.innerHTML += contactList.list[i];
    };
  },
};

<form>
  First name:<br>
  <input id="firstname" type="text" name="firstname">
  <br> Last name:<br>
  <input id="lastname" type="text" name="lastname">
  <br> Email Address:<br>
  <input id="emailAdd" type="text">
  <br> Phone number:<br>
  <input id="phoneNumber" type="text">
  <br>
</form>
<button onclick='handlers.addContact()'>Submit</button>

<div id='displayContacts'>
  <ul id='contactul'>

  </ul>
</div>

This is the desired result. I just can't figure out how to write it.

Answer 1

嗯，你很亲密。你在这里遇到的问题是当你去展示你的项目时，你必须得到每个单独元素（名字，姓氏等）的值。您可以通过另一个循环执行此操作，或者只对每个循环进行硬编码，因为只有4.这是一个示例：

//this passes the text input as an object to the list array
var contactList = {
  list: [],

  addNew: function() {
    this.list.push({
      firstName: document.getElementById('firstname').value,
      lastName: document.getElementById('lastname').value,
      email: document.getElementById('emailAdd').value,
      phoneNumber: document.getElementById('phoneNumber').value
    });
  },
};

// this runs the addNew() function and clears the input fields afterwards
var handlers = {
  addContact: function() {
    contactList.addNew();

    document.getElementById('firstname').value = '';
    document.getElementById('lastname').value = '';
    document.getElementById('emailAdd').value = '';
    document.getElementById('phoneNumber').value = '';

    view.displayContact();
  },

};
//this is where i'm trying to display the contacts array
var view = {
  displayContact: function() {
    var contacts = document.getElementById('contactul');
    while(contacts.firstChild ){
      contacts.removeChild(contacts.firstChild );
    }
    for (var i = 0; i < contactList.list.length; i++) {
      var liForFirstName = document.createElement('li');
      contacts.appendChild(liForFirstName);
      liForFirstName.innerHTML += "First Name: " + contactList.list[i].firstName;
      var liForLastName = document.createElement('li');
      contacts.appendChild(liForLastName);
      liForLastName.innerHTML += "Last Name: " + contactList.list[i].lastName;
      var liForEmail = document.createElement('li');
      contacts.appendChild(liForEmail);
      liForEmail.innerHTML += "Email: " + contactList.list[i].email;
      var liForPhoneNumber = document.createElement('li');
      contacts.appendChild(liForPhoneNumber);
      liForPhoneNumber.innerHTML += "Phone Number: " + contactList.list[i].phoneNumber;
    };
  },
};

<form>
  First name:<br>
  <input id="firstname" type="text" name="firstname">
  <br> Last name:<br>
  <input id="lastname" type="text" name="lastname">
  <br> Email Address:<br>
  <input id="emailAdd" type="text">
  <br> Phone number:<br>
  <input id="phoneNumber" type="text">
  <br>
</form>
<button onclick='handlers.addContact()'>Submit</button>

<div id='displayContacts'>
  <ul id='contactul'>

  </ul>
</div>