How do I display array object information? : <pre><code>    &lt;html&gt;
&lt;head&gt;

&lt;script&gt;

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 person ={
        fname : firstName,
        lname : lastName,
        email : emailId,
        phone : phoneNo
    };


    contacts.push(person);  

    var currPerson = contacts[contacts.length-1]; //take last pushed object from the array

        if(currPerson.lname.toUpperCase().charAt(0)==='Z'){

        document.getElementById("mydiv").innerHTML +=currPerson.fname+" "+currPerson.lname + '&lt;br/&gt;';
        }



}

&lt;/script&gt;

&lt;body&gt;

&lt;button onclick="getInfo()"&gt;Get Person Info&lt;/button&gt;
&lt;p&gt;----------------------------&lt;/p&gt;
&lt;div id="mydiv"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/WYv2a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WYv2a.png" alt="Output"></a></p>

<blockquote>
  <p>When I click on billa zopper, his <strong>details(full name,phone and email)</strong> should appear on right hand side in the same page. How do I achieve this? I know DOM is an option. But how do I link the DOM with the array elements? </p>
</blockquote>
