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

Question

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

/* 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>

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

store user input in an array and display on screen

javascript

arrays

input

function

display