如何根据用户指定的数量动态创建输入表单元素？

为用户指定的数字创建动态输入表单元素

了解手头的任务，用户打算基于动态生成输入表单元素基于用户提供的整数。我们的目标是提供一个简单的解决方案，而不会使过程过于复杂。

利用 JavaScript，我们可以通过以下步骤来应对这一挑战：

1. 检索用户输入：

   • 利用“填写详细信息”链接的 onclick 事件处理程序从输入字段检索整数值。
   • 为输入分配唯一的 id 属性字段，例如“member”，以轻松访问其值。

2. 为输入元素创建容器：

   • 定义一个容器元素，例如
     ，其中将放置动态生成的元素。

   • 生成输入元素：

     • 根据用户提供的整数值迭代循环。
     • 使用 document.createElement() 创建新的 元素并设置其类型和名称属性。
     • 使用appendChild()将创建的元素追加到指定容器。

   • 清除以前的元素(可选）：

     • 如果需要，请在生成新元素之前使用 hasChildNodes() 和 removeChild() 删除容器中的任何现有元素。

   代码片段：

   <code class="javascript">function addFields(){
       // Get user input for number of elements
       var number = document.getElementById("member").value;
   
       // Get the element where inputs will be placed
       var container = document.getElementById("container");
   
       // Remove any existing elements
       while (container.hasChildNodes()) {
           container.removeChild(container.lastChild);
       }
   
       // Create and append input elements
       for (i=0; i<number; i++){
           container.appendChild(document.createTextNode("Member " + (i+1)));
           var input = document.createElement("input");
           input.type = "text";
           input.name = "member" + i;
           container.appendChild(input);
           container.appendChild(document.createElement("br"));
       }
   }</code>