ホームページ > ウェブフロントエンド > jsチュートリアル > ユーザー指定の数値に基づいて入力フォーム要素を動的に作成する方法

ユーザー指定の数値に基づいて入力フォーム要素を動的に作成する方法

Linda Hamilton
リリース: 2024-10-27 09:59:03
オリジナル
994 人が閲覧しました

How to Dynamically Create Input Form Elements Based on User-Specified Number?

ユーザー指定の番号に対する動的入力フォーム要素の作成

当面のタスクを理解すると、ユーザーは、次の内容に基づいて入力フォーム要素を動的に生成することを意図しています。ユーザーが指定した整数に基づいて計算されます。目標は、プロセスを過度に複雑にすることなくシンプルなソリューションを提供することです。

JavaScript を利用すると、次の手順を採用してこの課題に取り組むことができます:

  1. ユーザーの取得入力:

    • 「詳細を入力」リンクの onclick イベント ハンドラーを使用して、入力フィールドから整数値を取得します。
    • 入力に一意の ID 属性を割り当てます。
  2. 入力要素のコンテナを作成:

    • 動的に生成された要素が配置される、
      などのコンテナ要素を定義します。
  3. 入力要素の生成:

    • ユーザーが指定した整数値に基づいてループを繰り返します。
    • document.createElement() を使用して新しい を作成します。
    • appendChild() を使用して、作成した要素を指定されたコンテナに追加します。
  4. 前の要素をクリア (オプション):

    • 必要に応じて、新しい要素を生成する前に 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>
ログイン後にコピー

以上がユーザー指定の数値に基づいて入力フォーム要素を動的に作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート