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

Question

I've just started learning JS and I'm trying to do some basic projects to cement what I've learned from reading and courses and tutorials and whatnot. I'm trying to make a contact list which takes 4 inputs: first name, last name, email and phone number. I wrote this part already and passed the arguments into an object within an array. What I can't figure out is how to display the contact object. I want to try and print each property into a list item within an unordered list but I'm stuck here, either because I don't know enough about DOM manipulation or just because I'm not looking in the right direction

 //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

Well, you're close. The problem you have here is that when you go to display your items, you have to get the values for each individual element (first name, last name, etc). You can do that through another loop, or just hard-code each one since there are only 4. Here is an example:

 //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>