Display array elements in html page as they are being entered

Question

var contacts =[];

function getInfo() {
    var firstName = prompt("Enter first name");
    var lastName = prompt("Enter last name");
    var emailId = prompt("Enter Email ID");
    var phoneNo = prompt("Enter Phone number");
    var fname, lname, email, phone;
    var person ={
        fname : firstName,
        lname : lastName,
        email : emailId,
        phone : phoneNo
    }
    contacts.push(person);  




for(i=0;i<contacts.length;i++){
    document.getElementById("mydiv").innerHTML += contacts[i].fname+" "+contacts[i].lname;
}
}

I want to display only the new array elements. In the above code, every time a new element enters the array all elements are displayed. How can I avoid repetition? I think using the DOM is an option. I'm stuck trying to implement this.

Answer 1

You can do it like this, adding only the last element of array to innerHTML

var contacts =[];

function getInfo() {
    var firstName = prompt("Enter first name");
    var lastName = prompt("Enter last name");
    var emailId = prompt("Enter Email ID");
    var phoneNo = prompt("Enter Phone number");
    var fname, lname, email, phone;
    var person ={
        fname : firstName,
        lname : lastName,
        email : emailId,
        phone : phoneNo
    };
    contacts.push(person);  


    document.getElementById("mydiv").innerHTML += contacts[contacts.length-1].fname+" "+contacts[contacts.length-1].lname;

}

Answer 2

在添加所有元素之前，您必须先清空div。

document.getElementById("mydiv").innerHTML = ''

Answer 3

Here is a working snippet of what you asked. you just have to take the last pushed object from the array and display the names.

Also your var fname, lname, email, phone is not required, You can set the object properties on the fly.

 var contacts =[]; function getInfo() { var firstName = prompt("Enter first name"); var lastName = prompt("Enter last name"); var emailId = prompt("Enter Email ID"); var phoneNo = prompt("Enter Phone number"); // var fname, lname, email, phone; //also this is not required. you can set dynamic property names in a object. var person ={ fname : firstName, lname : lastName, email : emailId, phone : phoneNo }; contacts.push(person); var currPerson = contacts[contacts.length-1]; //take the last pushed object from the array var lastNameFirstChar = currPerson.lname.charAt(0).toUpperCase(); if(!document.getElementById(lastNameFirstChar + "_holder")){ document.getElementById("mydiv").innerHTML += "<div id='"+lastNameFirstChar+"_holder' class='holder'><span class='charValue'>"+lastNameFirstChar+"</span></br></div>"; } document.getElementById(lastNameFirstChar + "_holder").innerHTML += currPerson.fname+" "+currPerson.lname + "<br/>"; } 

 <button onclick="getInfo()">Get Person Info</button> <p>----------------------------</p> <div id="mydiv"> </div> 

EDIT: Since you said you can use Jquery I have updated the solution with Jquery.

Answer 4

just change:

if(contacts.length!=0){
   document.getElementById("mydiv").innerHTML += contacts[contacts.length-1].fname+" "+contacts[contacts.length-1].lname;
}

The if check is for the start when length of array is zero