使用appendChild生成动态输入框后，如何读取并存储多用户输入？

我来帮你搞定这个问题！你遇到的getElementById返回null，主要有两个核心原因：

• 你动态生成的输入框没有设置id属性，而且你错误地尝试获取一个不存在的id="input"元素，自然拿不到有效数据；
• 你在生成输入框的同时就去读取值，这时候用户还没来得及输入内容，时机完全不对。

下面是修改后的完整解决方案，我会一步步说明关键改动：

第一步：修复动态生成输入框的代码 #

给每个生成的输入框加上唯一的id，同时优化用户体验（比如添加占位提示）：

function addFields() { 
    // 获取输入的人数
    var number = document.getElementById("member").value; 
    // 限制最大10人，避免生成过多输入框
    if (number > 10) {
        alert("最多只能输入10人哦！");
        return;
    }
    // 获取存放动态输入框的容器
    var container = document.getElementById("container"); 
    // 清空容器内之前的内容
    while (container.hasChildNodes()) { 
        container.removeChild(container.lastChild); 
    } 
    for (i = 0; i < number; i++) { 
        // 添加成员编号提示
        container.appendChild(document.createTextNode("Member " + (i + 1))); 
        // 创建输入框元素，设置必要属性
        var input = document.createElement("input"); 
        input.type = "text"; 
        input.name = "member" + i;
        input.id = "member" + i; // 新增id属性，和name一致方便唯一定位
        input.placeholder = "请输入姓名"; // 添加占位提示，提升用户体验
        container.appendChild(input); 
        // 添加换行符
        container.appendChild(document.createElement("br")); 
    } 
} 

// 新增收集姓名的函数，供后续步骤调用
let memberNames = []; // 全局数组存储姓名，其他函数可直接调用
function collectNames() {
    var number = document.getElementById("member").value;
    memberNames = []; // 清空之前的数组，避免残留旧数据
    for (i = 0; i < number; i++) {
        var inputValue = document.getElementById("member" + i).value.trim();
        if (inputValue) {
            memberNames.push(inputValue);
        } else {
            alert(`第${i+1}位成员的姓名不能为空！`);
            return false; // 校验不通过，终止后续操作
        }
    }
    // 可在控制台查看收集到的姓名，方便调试
    console.log("收集到的成员姓名：", memberNames);
    return true; // 校验通过，允许执行下一步
}

第二步：修改页面跳转按钮的逻辑 #

把“Go to Step 2”的跳转改成先调用收集函数，校验通过后再跳转：

<!-- 修改navbar里的跳转按钮 -->
<div data-role="navbar"> 
    <ul> 
        <li> 
            <a href="#homepage" data-icon="arrow-l" data-transition="slide" data-direction="reverse">Go back to Homepage</a> 
        </li>
        <li> 
            <a href="#splitting_items" data-icon="arrow-r" data-transition="slide" onclick="return collectNames()">Go to Step 2: Enter Items </a> 
        </li> 
    </ul> 
</div>

关键说明 #

1. 全局数组memberNames：这个数组会存储所有用户输入的姓名，你在其他函数里直接调用这个变量就能拿到数据；
2. 输入校验：collectNames()里加了简单的非空校验，避免用户漏填姓名导致后续流程出错；
3. id设置：动态生成的输入框id和name保持一致，确保每个输入框都能被唯一定位；
4. 时机正确：只有当用户点击下一步时才去收集数据，这时候用户已经完成输入，能拿到有效内容。

现在你可以测试一下：输入人数点击“Fill Details”生成输入框，填写姓名后点击下一步，控制台会打印出收集到的姓名数组，后续函数直接用memberNames就可以啦！

内容的提问来源于stack exchange，提问作者Michael Vilanova