基于数字输入动态新增表单输入字段问题排查

你的代码存在几个关键问题，导致事件触发后无预期效果：

• 初始值未实时更新：页面初始化时就获取了siblings.value，这个值是固定的初始状态（默认空或0），事件触发时不会读取当前输入的最新数值，循环条件无法满足，自然不会生成输入框。
• 错误的元素挂载目标：<input>是自闭合标签，不能作为父容器容纳其他元素，执行siblings.appendChild(newField)不会有任何效果，需要新增专门的容器存放生成的输入字段。
• 属性拼写错误：setAttribute('siz',50)里的siz是笔误，正确属性名是size，否则输入框宽度设置不生效。
• 未处理重复触发的累加问题：用户多次修改数字时，旧的输入框不会被清除，会不断叠加新字段。

修正后的代码 #

HTML 部分

<i>Do you have any siblings?&nbsp;</i>
<input type="number" id="siblings" name="siblings" min="0">
<!-- 新增容器用于存放生成的输入字段 -->
<div id="siblingFieldsContainer"></div>

JavaScript 部分

var siblings = document.getElementById('siblings');
var container = document.getElementById('siblingFieldsContainer');

siblings.onchange = function(){
    // 先清空容器内已有的输入字段
    container.innerHTML = '';
    // 获取当前输入的最新数值，转为整数
    var count = parseInt(this.value) || 0;
    let i = 0;
    while (i < count){
        var newField = document.createElement('input');
        newField.setAttribute('type','text');
        newField.setAttribute('name','siblingInfo[]');
        newField.setAttribute('class','siblingInfo');
        newField.setAttribute('size',50);
        // 添加到专门的容器中
        container.appendChild(newField);
        // 添加换行符，让输入框分行显示
        container.appendChild(document.createElement('br'));
        i++;
    }
}

如果希望用户输入时实时更新（而非失去焦点才触发），可以把onchange换成oninput事件，体验更流畅。

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