如何用JavaScript根据输入数值生成对应数量DOM输入框并解决页面崩溃问题

问题原因 #

• for循环判断条件逻辑错误：你写的i = va是赋值操作而非比较操作，只要va为非0有效值，该条件永远返回真值，直接触发无限循环，导致页面卡死崩溃。
• 循环内逻辑错误：每次循环都直接给ext.innerHTML赋值，会覆盖之前的内容，就算循环正常也只能生成1个输入框，达不到生成x个的效果。
• 缺少边界值校验：用户输入负数、非数字、小数时没有对应处理逻辑，容易出现异常。

正确实现代码 #

HTML 部分 #

将原有的onkeyup替换为oninput，覆盖键盘输入、鼠标点击数值调整、粘贴等所有值变化场景：

<input type="number" id="no_pi" name="" oninput="des()">
<div id="extract"></div>

JS 部分 #

function des() {
    const ext = document.getElementById('extract');
    // 对输入值做取整+有效性校验
    const count = parseInt(document.getElementById('no_pi').value, 10);
    if (isNaN(count) || count < 1) {
        ext.innerHTML = '';
        return;
    }
    // 先拼接所有HTML字符串再一次性赋值，减少DOM操作损耗
    let htmlStr = '';
    for (let i = 0; i < count; i++) {
        htmlStr += "<input type='number' name='' class='form-control'><div class='input-group-text'>cm</div>";
    }
    ext.innerHTML = htmlStr;
}

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