如何通过单个输入框获取5个姓名并添加至数组？代码问题求解

原代码的核心问题：

• 循环4次但每次都读取输入框当前的同一个值，点击一次按钮会往数组里塞4个重复内容，根本没法获取5个不同姓名
• 循环次数写错了，i<4只能执行4次，和需求的5个名额不符
• 没有处理输入时机，没法让用户分别输入不同姓名

给你两种实用的解决方案，按需选择：

方案一：单次输入+逐次添加（适合逐个录入） #

每次输入一个姓名，点击按钮添加，直到数组凑够5个元素，同时做输入校验和输入框清空操作：

const studentName = [];

function AddNewMember() {
    const name = document.getElementById("vorodi").value.trim();
    // 校验输入非空，且还没到5个名额
    if (name && studentName.length < 5) {
        studentName.push(name);
        document.getElementById("vorodi").value = ""; // 清空输入框方便下次输入
        console.log(`已添加 ${studentName.length}/5 个姓名`);
    } else if (studentName.length >= 5) {
        console.log("已经够5个姓名了，不用再加啦");
    } else {
        console.log("请输入有效的姓名，不能为空");
    }
}

方案二：批量输入+拆分添加（适合一次性录入多个） #

允许用户用逗号（或其他你指定的分隔符）在输入框一次性输入多个姓名，代码会自动拆分并添加，直到数组满5个：

const studentName = [];

function AddNewMember() {
    const inputValue = document.getElementById("vorodi").value.trim();
    // 按逗号拆分输入内容，过滤掉空字符串
    const names = inputValue.split(",").map(item => item.trim()).filter(item => item);
    
    const needCount = 5 - studentName.length;
    if (needCount <= 0) {
        console.log("已经添加够5个姓名了");
        return;
    }
    
    // 只取需要的数量添加，避免超量
    const addList = names.slice(0, needCount);
    studentName.push(...addList);
    
    document.getElementById("vorodi").value = "";
    console.log(`已添加 ${studentName.length}/5 个姓名`);
}

使用提示：

• 方案一需要用户分5次输入，每次点击按钮确认添加
• 方案二支持批量输入，比如输入"张三,李四,王五,赵六,钱七"，一次就能填满数组

内容的提问来源于stack exchange，提问作者yunes Mohammady