Javascript 如何显示阵列对象信息？_Javascript_Arrays_Dom

Javascript 如何显示阵列对象信息？

javascript arrays dom

Javascript 如何显示阵列对象信息？,javascript,arrays,dom,Javascript,Arrays,Dom,当我点击billa zopper时，他的详细信息全名、电话和电子邮件应该出现在同一页的右侧。我如何做到这一点？我知道DOM是一种选择。但是如何将DOM与数组元素链接我正在使用数组索引的相关性来做一个简单的例子。我觉得有必要指出，这不是我在现实世界应用程序中实际实现任何东西的方式。但是你问过如何让它在点击时在一个侧面div中显示东西，所以我们来了 <html> <head> <script> var contacts =[]; function

当我点击billa zopper时，他的详细信息全名、电话和电子邮件应该出现在同一页的右侧。我如何做到这一点？我知道DOM是一种选择。但是如何将DOM与数组元素链接

我正在使用数组索引的相关性来做一个简单的例子。我觉得有必要指出，这不是我在现实世界应用程序中实际实现任何东西的方式。但是你问过如何让它在点击时在一个侧面div中显示东西，所以我们来了

    <html>
<head>

<script>

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 + '<br/>';
        }



}

</script>

<body>

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

取决于您要写入的元素。你在这里贴的东西怎么了？您是否不确定如何使数组foreach写入所有名称？它可以工作，但仅当姓氏以大写字母开头时有效Z@Nikki9696我将有n个联系人。如果我在列表中选择任何姓名，则应显示信息全名、电话、电子邮件。在上面的代码中，我只是打印当前元素，我没有上一个元素的轨迹来使用onClick显示其他信息。如何将其与DOM关联以打印全名、电子邮件、电话？名称是否总是来自用户输入？或者这是一个来自服务或web请求的实体模型？@Nikki9696是的，名称总是来自用户输入。这不是我在现实世界中实际实现任何东西的方式。。。投票赞成让我开怀大笑D=有更好的方法来做这类事情，但我会编写整个应用程序。据我所知，有人告诉他这样做就像做家庭作业之类的…@Nikki9696它只显示person.fname？我可以让它显示全名、电子邮件、电话吗？我试过了，但它只显示了最后一个。@document.getElementByIdmydiv.innerHTML+=+currPerson.fname++currPerson.lname+；你能解释一下什么是currPerson.id吗？我知道它正在传递数组索引，但无法理解它是如何工作的。我为id属性借用了数组的位置索引。您可以使用任何东西，比如GUID或来自数据库的id。我在设置名称的同时设置它。这是我在数组中查找人物以显示细节的方式。如果您使用了GUID或其他信息，那么您必须像我一样使用索引来查找它。有下划线.js方法可以按属性值查找数组项。我会用这个。

<button onclick="getInfo()">Get Person Info</button>
<p>----------------------------</p>
<div id="mydiv"></div>
<div id="target" style="float: right;">
</div>


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

    contacts.push(person);
    var currPerson = contacts[contacts.length-1];
    if(currPerson.lname.toUpperCase().charAt(0)==='Z') {        
            document.getElementById("mydiv").innerHTML += "<span onclick='showMe(" + currPerson.id + ")'>" + currPerson.fname + " " + currPerson.lname + "</span><br/>";

    }
 }

function showMe(id) {
   var person = contacts[id];  /* currently corresponds to array index, could be a property lookup with underscore or whatever */
   target.innerHTML = "<div>" + person.fname + "</div>";
}