如何用JavaScript根据用户输入批量生成多组输入框？

我想要自动生成多个用户输入框：比如用户输入10，每次生成3个输入字段，最终得到30个输入框。折腾了一整天还是没解决——循环前代码能正常运行，加上循环后就失效了。

循环前的效果（已关联CSS，输入框呈单行排列）：

我的代码如下：

// Get the input value only once
const inputValue = document.querySelector(".inputBox").value;

// Define the function outside of the loop
function btnClick(){
   
  /// Loop until the input value is reached
  let i = 0;
  while (i < inputValue) {
    // Create a new div element
    const divElement = document.createElement("div");
    const sp2 = document.querySelector(".page");
    const parentdiv = sp2.parentNode;
    parentdiv.insertBefore(divElement, sp2.nextSibling);

    //Adding class to new div element
    document.querySelectorAll("div")[2].classList.add("calBox");
    
    const length = "<p class='first'> Length : <input type='text' class='second' value='' /> </p>";
    const height = "<p class='first'> Height : <input type='text' class='second' value='' /> </p>";
    const width =  "<p class='first'> Width : <input type='text' class='second' value='' /> </p>";
    const first = document.querySelector(".calBox");
    const second = length + height + width +"<br />";

    first.innerHTML = second ;
    i++;
   
  }
}

核心问题点 #

• 输入值获取时机错误：页面加载时就获取inputValue，此时用户还未输入内容，值为空字符串或默认值，循环条件i < inputValue会因类型不匹配失效。
• 元素选择逻辑错误：
  • 每次循环都给固定位置的第3个div加calBox类，而非刚创建的div，导致后续元素无法正确关联样式和内容。
  • document.querySelector(".calBox")只会选中第一个带该类的元素，每次循环都把内容重复插入到同一个元素，而非新创建的div。
• DOM操作冗余：循环内重复查询DOM节点，既影响性能又容易引发错误。

修复后的代码 #

function btnClick(){
  // 点击按钮时获取用户输入并转为整数
  const inputValue = parseInt(document.querySelector(".inputBox").value, 10);
  // 非有效数字直接终止
  if (isNaN(inputValue) || inputValue < 1) return;

  const sp2 = document.querySelector(".page");
  const parentdiv = sp2.parentNode;
  
  let i = 0;
  while (i < inputValue) {
    // 创建新div并直接添加类
    const divElement = document.createElement("div");
    divElement.classList.add("calBox");
    
    // 组装输入框HTML结构
    const fields = `
      <p class='first'> 长度 : <input type='text' class='second' value='' /> </p>
      <p class='first'> 高度 : <input type='text' class='second' value='' /> </p>
      <p class='first'> 宽度 : <input type='text' class='second' value='' /> </p>
      <br />
    `;
    divElement.innerHTML = fields;
    
    // 将新元素插入到目标位置
    parentdiv.insertBefore(divElement, sp2.nextSibling);
    i++;
  }
}

修复说明 #

• 调整输入值获取时机：在按钮点击事件内获取输入值，确保拿到用户最新输入，同时转为整数避免类型比较错误。
• 直接操作新创建元素：给刚生成的divElement直接添加类并插入内容，避免重复查询DOM导致的逻辑混乱。
• 优化DOM查询：把固定的DOM节点查询放到循环外，减少重复操作提升性能。

内容的提问来源于stack exchange，提问作者Learner-Xdot