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

Display array elements in html page as they are being entered

本文关键字：数组元素 显示 html 输入      更新时间：2023-09-26
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 是一种选择。我被困在尝试实现这一点。

你可以

这样做，只添加array的last element 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;
}

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

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

这是您提出的工作片段。 您只需要从数组中获取最后一个推送的对象并显示名称即可。

此外，您的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更新了解决方案。

只需更改：

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

if 检查用于数组长度为零时的开始

相关文章：