如何用JavaScript从多输入字段创建对象列表？打印undefined问题排查

我用HTML/CSS做了个表单，想把输入值存成对象再加入数组，作为用户信息数据库。试了下面的代码，但不管提交多少次，用document.write打印数组时输出都是undefined，理论上数组应该已经有多个对象了。

signupbtn.addEventListener('click', function(){
addObject();
HideSignUpPage();
});

let objects = [];

function addObject(){
var firstname = document.getElementById("firstnamebox").value; 
var lastname = document.getElementById("lastnamebox").value;
var emailornumber = document.getElementById("emailornumberbox").value;
var password = document.getElementById("passwordbox").value;
var month = document.getElementById("monthbox").value;
var year = document.getElementById("yearbox").value;
var day = document.getElementById("daybox").value;
var gender;
var radiobuttons = document.getElementsByName("gender");
for (let i = 0; i < radiobuttons.length; i++){
    if (radiobuttons[i].checked){
        gender = radiobuttons[i].value;
        break;
    }
}
var obj = {
    firstname: firstname,
    lastname: lastname,
    emailornumber: emailornumber,
    password: password,
    month: month,
    year: year,
    day: day,
    gender: gender
};

objects.push(obj)
}

document.getElementById("objects").innerHTML = objects

问题分析 #

1. DOM更新时机错误：原代码里document.getElementById("objects").innerHTML = objects是在页面加载时执行的，此时objects还是空数组，后续提交表单添加对象后不会自动更新DOM。
2. 数组直接转字符串的问题：直接把数组赋值给innerHTML，JavaScript会把数组转为字符串，对象会显示为[object Object]；如果没选中性别单选框，gender会是undefined，但你看到的undefined大概率是用document.write时，数组还没被填充就执行了，或者document.write的调用时机不对。
3. document.write的副作用：页面加载完成后调用document.write会覆盖整个页面，很容易导致意外输出。

修复方案 #

1. 每次添加对象后更新DOM：把DOM更新的代码移到addObject函数内部，确保每次提交后都刷新显示。
2. 格式化数组输出：用JSON.stringify把数组转成可读性强的JSON字符串，避免[object Object]的模糊输出。
3. 给gender设置默认值：防止没选中单选框时出现undefined。
4. 弃用document.write：用指定DOM元素的innerHTML来展示数据更安全可控。

修改后的代码 #

signupbtn.addEventListener('click', function(){
    addObject();
    HideSignUpPage();
});

let objects = [];

function addObject(){
    var firstname = document.getElementById("firstnamebox").value; 
    var lastname = document.getElementById("lastnamebox").value;
    var emailornumber = document.getElementById("emailornumberbox").value;
    var password = document.getElementById("passwordbox").value;
    var month = document.getElementById("monthbox").value;
    var year = document.getElementById("yearbox").value;
    var day = document.getElementById("daybox").value;
    // 给gender设置默认值
    var gender = "未选择";
    var radiobuttons = document.getElementsByName("gender");
    for (let i = 0; i < radiobuttons.length; i++){
        if (radiobuttons[i].checked){
            gender = radiobuttons[i].value;
            break;
        }
    }
    var obj = {
        firstname: firstname,
        lastname: lastname,
        emailornumber: emailornumber,
        password: password,
        month: month,
        year: year,
        day: day,
        gender: gender
    };

    objects.push(obj);
    // 每次添加后更新DOM，用JSON格式化输出
    document.getElementById("objects").innerHTML = JSON.stringify(objects, null, 2);
}

额外提示 #

• 可以给表单添加submit事件监听，并调用event.preventDefault()阻止默认提交行为，避免页面刷新丢失数组数据（如果没有用本地存储的话）。
• 如果需要持久化数据，可以用localStorage.setItem("users", JSON.stringify(objects))保存，刷新页面后再用objects = JSON.parse(localStorage.getItem("users")) || []恢复。

内容的提问来源于stack exchange，提问作者Homam Murad