表单循环生成子输入框异常：点击按钮后输入框无限重复添加

你遇到的这个问题很常见——每次点击按钮时，代码只是一个劲儿地往#xx容器里追加新的输入框，完全没有处理容器里已有的内容，所以不管点多少次，都会在原有基础上再添加对应数量的输入框，导致内容不断重复累积。

修复方案：先清空旧内容，再生成新输入框 #

只需要在生成新的输入框之前，先清空目标容器里的已有内容，就能解决重复添加的问题。这里是修改后的完整代码：

JavaScript 部分

function numbchild() { 
    const form = document.form2; 
    // 先把输入的数量转成数字，避免类型错误
    const childCount = parseInt(form.no_child.value);
    
    // 获取存放输入框的容器，先清空已有内容
    const inputContainer = document.getElementById('xx');
    inputContainer.innerHTML = '';
    
    // 循环生成对应数量的学生姓名输入框
    for (let i = 0; i < childCount; i++) { 
        inputContainer.insertAdjacentHTML(
            "afterbegin",
            `Enter student's name: <input type='text' name='s_name'><br />`
        ); 
    } 
}

HTML 部分（可保留原结构，也可以给按钮加更明确的文本）

<form name="form2"> 
    How many children?: <input type="text" name="no_child" size="20" required><br /> 
    <input type="button" name="test" onclick="numbchild()" value="Generate Student Inputs">
    <p id="xx"></p> 
</form>

关键修改点说明 #

• 清空旧内容：通过inputContainer.innerHTML = ''清空容器，确保每次点击按钮都是从空白状态开始生成输入框，不会叠加旧内容。
• 类型转换：提前把输入的no_child值转成整数parseInt(form.no_child.value)，避免循环时因字符串类型导致的意外问题。
• 变量规范：用const/let代替var，更符合现代JavaScript的变量作用域规范，减少潜在bug。

如果你的需求是「只有第一次点击生成，后续点击不重复生成」，也可以加一个标记变量来判断是否已经生成过，但从你的描述来看，上面的方案完全匹配「输入数量后点击生成对应个数输入框，再次点击会根据新数量更新」的需求。

内容的提问来源于stack exchange，提问作者Anim Rahman