将用户输入存储在数组中并显示在屏幕上

Question

将信息存储在数组中（firstName、lastName、accNumber 等）。我已经在数组中有一些数据。我想询问用户输入并将该输入推送到数组中并将其保存并显示在屏幕上（而不是在控制台中）。新信息也没有保存在数组中。我使用 prompt 和 form 。 from 不工作。

/* creatting array  */
        var customer = [
            {fname: "Jhon", lname: "Yojin", accNo: 1, balance: 400},
            {fname: "Jane", lname: "Jin", accNo: 2, balance: 500},
            {fname: "Emily", lname: "Sena", accNo: 5, balance: 100}
        ];
        console.log(customer.length);
        console.log(customer[1].fname);
        console.log(customer[2].lname);
        var newName = prompt("what is your lnamename?");
        customer.push(newName);
        console.log(customer);

    /*function to add data in array*/    
    function addInArray() {
        var  addName = document.getElementById("#nameInput");
        customer.push(addName.value);
        addName.value = "";
        console.log(customer);

    } 
     /* display array*/
    function displayArray(){
        for(var i=0; i < customer.lenght; i++){
            document.write("customer" + i + customer[i] + "</br>");
            document.getElementById("#showName").innerHTML = customer[i];
        }
    }    
    </script>

    <form>
        <input id="nameInput" type="text"/ placeholder="yourInfo">
        <button type="button" id="add" onclick="addInArray();">Add </button>
        <button type="button" id="myList" onclick="displayArray();">Display</button>
    </form>  
        <div id="box"></div> 
        <div id="showName"> </div>
    </body>

Answer 1

您在使用getElementById时不应该写#

/* creatting array  */
var customer = [
    {fname: "Jhon", lname: "Yojin", accNo: 1, balance: 400},
    {fname: "Jane", lname: "Jin", accNo: 2, balance: 500},
    {fname: "Emily", lname: "Sena", accNo: 5, balance: 100}
];

displayMyAcc()
function displayMyAcc(){ 
var myAccNo = prompt("what is your acc number?");
document.getElementById("showName").innerHTML=JSON.stringify(customer.filter(x=>x.accNo==myAccNo)[0]);
}

/*function to add data in array*/    
function addInArray() {
  var  addName = document.getElementById("nameInput");
  customer.push(addName.value);
  addName.value = "";

} 
/* display array*/
function displayArray(){
  for(var i=0; i < customer.length; i++){
      document.getElementById("showName").innerHTML += JSON.stringify(customer[i]);
  }
}

<form>
    <input id="nameInput" type="text"/ placeholder="yourInfo">
    <button type="button" id="add" onclick="addInArray();">Add </button>
    <button type="button" id="myList" onclick="displayArray();">Display</button>
</form>  
<div id="box"></div> 
<div id="showName"> </div>