纯JS实现动态有序列表无法访问数组内对象属性的极简方案求助

错误原因 #

你为user对象赋值时，已经把表单元素的value值取出存入对象，user的所有属性存储的都是纯文本值，并非DOM元素，因此额外加.value访问自然返回undefined，直接访问user[key]即可拿到对应值。

极简动态有序列表实现（符合KISS原则，仅使用基础语法） #

不需要用到你未学习的API，仅用基础循环和DOM操作即可完成，修改后完整代码如下：

<html>
<body>
    <form>
        <input type="text" id="firstname" placeholder="名">
        <input type="text" id="lastname" placeholder="姓">
    </form>
    <button onclick="insertUser()">添加用户</button>
    <div id="myContainer"></div>
</body>
<script>
    const properties = ['firstname', 'lastname']
    const users = []
    const form = document.querySelector('form')
    const myParent = document.getElementById('myContainer')

    function insertUser() {
        // 收集表单数据存入user对象
        const user = {}
        for (let prop of properties) {
            user[prop] = form.elements[prop].value
        }
        users.push(user)
        form.reset()

        // 测试遍历user对象
        for (let key in user){
            console.log(user[key]) // 现在可以正常输出值
        }

        // 渲染动态有序列表
        myParent.innerHTML = '' // 清空旧列表
        const ol = document.createElement('ol')
        // 遍历用户数组生成列表项
        for (let i = 0; i < users.length; i++) {
            const currentUser = users[i]
            const li = document.createElement('li')
            // 拼接用户信息，可根据需要调整格式
            li.textContent = `${currentUser.firstname} ${currentUser.lastname}`
            ol.appendChild(li)
        }
        myParent.appendChild(ol)
    }
</script>
</html>

内容的提问来源于stack exchange，提问作者Arthur Berman