Javascript Push 正在用新对象替换所有对象

Question

Simple test i'm making, learning javascript...我正在做的简单测试，学习 javascript ......

Trying to create an array of objects... The problem is that when i add a new object to the array, with push, all the other objects in the array are replaced also with the new object ...试图创建一个对象数组......问题是当我向数组中添加一个新对象时，通过推送，数组中的所有其他对象也被替换为新对象......

What am i doing wrong ?我究竟做错了什么？

This is my code :这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Contacts - Example of Array with object</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        var people=[];
        var person={};
        function init(){
            updTable();
        }
        function addPerson(){
            p=person;
            p.name=document.getElementById("name").value;
            p.surname=document.getElementById("surname").value;
            p.age=document.getElementById("age").value;
            people.push(p);
            updTable();
        }
        function updTable(){
            var tab=document.getElementById("table");
            var txt="";
            for(var x=0;x<people.length;x++){
                txt=txt+'<tr><td>'+x+'</td><td>'+people[x].name+'</td><td>'+people[x].surname+'</td><td>'+people[x].age+'</td><td><button onclick="delPerson('+x+')">Delete Person</button></td></tr>';
            }
            tab.innerHTML=txt;
        }
        function delPerson(id){
            people.splice(id,1);
            updTable();
        }
    </script>
</head>

<body>
    <div class="row">
        <div id="options" class="col-sm-4 bg-secondary text-white">
            <label>Insert Name</label><br />
            <input id="name" type="text"><br/>
            <label>Insert Surname</label><br />
            <input id="surnam" type="text"><br/>
            <label>Insert Age</label><br />
            <input id="age" type="text"><br/>
            <button onclick="addPerson()" class="btn btn-primary">Add Person</button>
            <button onclick="updTable()" class="btn btn-primary">Update Table</button>
        </div>
        <div id="tablediv" class="col-sm-8 bg-light text-dark">
            <table>
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Age</th>
                    <th>Option</th>
                </thead>
                <tbody id="table">
                </tbody>
            </table>
        </div>
    </div>
    <script>
                    updTable();
    </script>
</body>
</html>

Answer 1

Forget about it... figure it out ... should create a new object on each add, otherwise will keep adding to the same object all the objects ...忘记它......弄清楚......应该在每次添加时创建一个新对象，否则将继续将所有对象添加到同一个对象......

needed to add ap={};需要添加 ap={}; on the start of the addPerson() funtion instead of p=person;在 addPerson() 函数的开头而不是 p=person; sorry... my mistake ...抱歉，是我的错 ...

function addPerson(){
            p={};
            p.name=document.getElementById("name").value;
            p.surname=document.getElementById("surname").value;
            p.age=document.getElementById("age").value;
            people.push(p);
            updTable();
        }

Javascript Push 正在用新对象替换所有对象

问题描述

1 个解决方案

解决方案1
-1 2021-11-04 22:12:17

Javascript Push 正在用新对象替换所有对象

问题描述

1 个解决方案

解决方案1 -1 2021-11-04 22:12:17

解决方案1
-1 2021-11-04 22:12:17