JavaScript で入力フォーム要素を動的に生成するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で入力フォーム要素を動的に生成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-10-28 06:38:02

オリジナル

351 人が閲覧しました

How to Dynamically Generate Input Form Elements in JavaScript?

入力フォーム要素を動的に作成する

この記事では、ユーザー入力に基づいて入力フォーム要素を動的に作成するという、一般的なプログラミングの課題について詳しく説明します。目標は、JavaScript を使用して、初心者に明確で簡単な解決策を提供することです。

問題

Web ページには、ユーザーが数字を入力できるテキスト入力フィールドが含まれています。対応するリンクをクリックすると、ページはユーザーが追加情報を提供するための多数の入力フィールドを動的に生成する必要があります。ユーザーは最大 10 個の値を入力できます。

ソリューションの理解

ユーザー入力の取得:
- onclick イベントハンドラーは、入力フィールドの生成を担当するリンクに適用されます。
- イベントハンドラー内で、テキスト入力フィールドに入力された値は document.getElementById() を使用して取得できます。
コンテナの作成:
- id 属性を持つ div などのコンテナ要素 (例: "container") が必要です動的に生成された入力フィールドを保持します。
要素の動的生成:
- document.createElement() の使用、新規input 要素を作成できます。
- type や name などの属性は、入力ごとに設定する必要があります。
- appendChild() は、各入力要素をコンテナに追加するために使用されます。
前の要素のクリア:
- 重複を防ぐため、新しい子要素を生成する前にコンテナ内の既存の子要素を削除する必要があります。これは hasChildNodes() と RemoveChild() を使用して実行できます。
追加の機能強化:
- 要素を追加できます改行 (document.createElement("br")) やテキストノード (document.createTextNode()) のようにレイアウトを改善します。

コード例

次のコードスニペットは、ソリューションの実装を示しています:

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Get number of inputs
            var number = document.getElementById("member").value;

            // Get container
            var container = document.getElementById("container");

            // Clear container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }

            // Generate inputs
            for (i=0;i<number;i++){
                // Text node
                container.appendChild(document.createTextNode("Member " + (i+1)));

                // Input element
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);

                // Line break
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

ログイン後にコピー

以上がJavaScript で入力フォーム要素を動的に生成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。