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;
}
}

我想只显示新的数组元素。在上面的代码中，每次新元素进入数组时，都会显示所有元素。我该如何避免重复？我认为使用DOM是一种选择。我一直试图实现这个。

Answer 1

您可以这样做，只将last element array添加到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

以下是您提出的问题的工作片段。你只需要从数组中取出最后一个被推送的对象并显示名称。

您的var fname, lname, email, phone也不是必需的，您可以动态设置对象属性。

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>

编辑：既然你说你可以使用Jquery我用Jquery更新了解决方案。

Answer 4

只是改变：

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

如果数组的长度为零，则检查是否为开始

在输入时在html页面中显示数组元素

4 个答案: