如何在JavaScript中使用push方法存储并展示用户多输入值到数组

下面是修正后的完整代码，包含功能实现和问题修复：

<body> 
    <h3>employee form</h3>
    <div class="row">
        <div class="col-md-6">
            <form id="employeeForm">
                <label for="id">Id</label>
                <input type="number" id="i1" required/><br/>
                <label for="name">Name:</label>
                <input type="text" id="name" required><br/>
                <label for="qty">Qty:</label>
                <input type="number" id="qty" required/><br/>
                <label for="price">Price:</label>
                <input type="number" id="price" step="0.01" required/><br/>
                <button type="button" onclick="pushData();">ADD</button>
            </form>
        </div>
        <div class="col-md-6" id="display"></div>
    </div>

    <script>
        // 初始化空数组，移除不必要的默认空字符串
        var myArr = [];

        function pushData() {
            // 获取各输入框的值
            const id = document.getElementById('i1').value;
            const name = document.getElementById('name').value;
            const qty = document.getElementById('qty').value;
            const price = document.getElementById('price').value;

            // 用对象存储单条员工数据，便于后续管理
            const employee = {
                id: parseInt(id),
                name: name,
                qty: parseInt(qty),
                price: parseFloat(price)
            };

            // 将数据push到数组
            myArr.push(employee);

            // 清空表单输入框，方便下一次录入
            document.getElementById('employeeForm').reset();

            // 在页面展示数组内容，验证存储结果
            displayData();
        }

        function displayData() {
            const displayDiv = document.getElementById('display');
            displayDiv.innerHTML = '';
            
            // 遍历数组生成展示内容
            myArr.forEach((emp, index) => {
                const empCard = document.createElement('div');
                empCard.innerHTML = `
                    <h4>员工 ${index + 1}</h4>
                    <p>ID: ${emp.id}</p>
                    <p>姓名: ${emp.name}</p>
                    <p>数量: ${emp.qty}</p>
                    <p>价格: $${emp.price.toFixed(2)}</p>
                    <hr>
                `;
                displayDiv.appendChild(empCard);
            });

            // 控制台打印数组，方便调试
            console.log('当前数组内容:', myArr);
        }
    </script>
</body>

关键修改点说明： #

• 修正input类型：将type="Name"改为type="text"，type="Qty"/type="price"改为type="number"，给价格输入框添加step="0.01"支持小数，同时加required确保输入不为空。
• 阻止表单默认提交：把按钮type设为button，避免点击时表单提交导致页面刷新、数据丢失。
• 优化数组初始化：将var myArr = [""];改为var myArr = [];，避免初始空元素干扰数据。
• 结构化存储：用对象封装单条员工数据，相比零散存储值，更便于后续的查询、修改操作。
• 添加数据展示：新增displayData函数，把数组内容渲染到页面，直观验证存储结果。
• 修复HTML结构：调整form标签嵌套，确保所有表单元素都在form内，标签闭合正确。

额外建议： #

• 可以添加输入验证逻辑（比如ID不能重复、价格不能为负），提升表单健壮性。
• 如果需要持久化数据，可使用localStorage将数组存储到本地，页面刷新后数据不会丢失。

内容的提问来源于stack exchange，提问作者Mohammed Ajmal