循环生成自定义表单后元素消失问题求助

核心问题：表单默认提交行为触发页面刷新 #

你第一个<form>的onsubmit调用Player_Entry()后，浏览器会默认提交表单并刷新页面，刚生成的输入框还没来得及保留就随着页面刷新消失了——这是最关键的新手误区。

其他新手错误点 #

• 全局变量污染：Loop_End、Loop_Count、Variable_Name这些变量都没加let/const声明，直接变成全局变量，后续容易和其他代码冲突。
• 字符串拼接逻辑错误："Player_Name_" + Loop_Count + 1会把数字当成字符串拼接，比如Loop_Count=0时得到Player_Name_01，而非预期的Player_Name_1，需要把Loop_Count + 1用括号包裹。
• 变量命名混乱：先用Variable_Name存字符串，又重新声明为input元素，命名模糊且重复，不利于维护。
• 未处理类型转换：输入框的value是字符串类型，直接用来做循环条件可能出现隐式类型转换问题，需要转成数字。

修正后的代码 #

HTML部分

<form onsubmit="Player_Entry(event)">
    <label for="Number_Of_Players">Number of players</label>
    <input type="number" id="Select_Number_Of_Players" value="1" name="Number_Of_Players" min="1" max="12">
    <input type="submit">
</form>

<br>Enter Player Names<br>

<form id="Generated_Form"></form>

JS部分

function Player_Entry(event) {
    // 阻止表单默认提交行为，避免页面刷新
    event.preventDefault();

    // 获取玩家数量并转成数字类型
    const playerCount = Number(document.getElementById('Select_Number_Of_Players').value);
    const formContainer = document.getElementById('Generated_Form');

    // 清空之前生成的输入框（可选，避免重复生成）
    formContainer.innerHTML = '';

    for (let i = 0; i < playerCount; i++) {
        const playerIndex = i + 1;
        console.log(`Created Player Name Input: Player_Name_${playerIndex}`);
        
        // 创建输入框元素
        const nameInput = document.createElement("input");
        nameInput.type = "text";
        nameInput.placeholder = `Player ${playerIndex} Name`; // 添加占位提示更友好
        nameInput.name = `Player_Name_${playerIndex}`; // 给输入框加name属性，方便后续取值
        
        formContainer.appendChild(nameInput);
        // 可选：添加换行，让输入框垂直排列
        formContainer.appendChild(document.createElement("br"));
    }
}

关于后续存入二维数组的提示 #

后续要获取输入框的值时，可以通过document.querySelectorAll('#Generated_Form input')获取所有生成的输入框，然后遍历存入数组：

// 示例：获取所有玩家输入并存入数组
function collectPlayerData() {
    const inputs = document.querySelectorAll('#Generated_Form input');
    const playerData = [];
    inputs.forEach((input, index) => {
        playerData.push([index + 1, input.value.trim()]);
    });
    // 这里的playerData就是存储了玩家序号和名称的二维数组
    console.log(playerData);
}

内容的提问来源于stack exchange，提问作者Keir Liddle