如何根據使用者指定的數量動態建立輸入表單元素？

為使用者指定的數字建立動態輸入表單元素

了解手邊的任務，使用者打算基於動態產生輸入表單元素基於使用者提供的整數。我們的目標是提供一個簡單的解決方案，而不會使流程過於複雜。

利用JavaScript，我們可以透過以下步驟來應對這個挑戰：

1. 擷取使用者輸入：

   • 擷取使用者輸入：
   利用「填寫詳細資料」連結的onclick 事件處理程序從輸入欄位檢索整數值。
2. 為輸入分配唯一的 id 屬性字段，例如“member”，以輕鬆存取其值。
   • 為輸入元素建立容器：
3. 定義一個容器元素，例如
   ，其中將放置動態生成的元素。

   • 產生輸入元素：
   • 依照使用者提供的整數值迭代循環。

   使用 document.createElement() 建立新的 元素並設定其類型和名稱屬性。
4. 使用appendChild()將建立的元素追加到指定容器。
   • 清除先前的元素(可選）：
如果需要，請在產生新元素之前使用ChildNodes () 和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>

登入後複製
程式碼片段：