suchen

Heim >Web-Frontend >js-Tutorial >Wie generiert man Eingabeformularelemente dynamisch in JavaScript?

Wie generiert man Eingabeformularelemente dynamisch in JavaScript?

Barbara Streisand
Barbara StreisandOriginal
2024-10-28 06:38:02344Durchsuche

How to Dynamically Generate Input Form Elements in JavaScript?

Eingabeformularelemente dynamisch erstellen

Dieser Artikel befasst sich mit einer häufigen Programmierherausforderung: der dynamischen Erstellung von Eingabeformularelementen basierend auf Benutzereingaben. Ziel ist es, mit JavaScript eine klare und unkomplizierte Lösung für Anfänger bereitzustellen.

Das Problem

Eine Webseite enthält ein Texteingabefeld, in das Benutzer eine Zahl eingeben können. Beim Klicken auf einen entsprechenden Link sollte die Seite dynamisch so viele Eingabefelder generieren, damit der Benutzer zusätzliche Informationen bereitstellen kann. Benutzer können maximal 10 Werte eingeben.

Die Lösung verstehen

  1. Benutzereingaben abrufen:

    • An Der onclick-Ereignishandler wird auf den Link angewendet, der für die Generierung der Eingabefelder verantwortlich ist.
    • Innerhalb des Ereignishandlers kann der in das Texteingabefeld eingegebene Wert mit document.getElementById() abgerufen werden.

  2. Erstellen des Containers:

    • Ein Containerelement, z. B. ein Div mit einem ID-Attribut (z. B. „Container“), ist erforderlich um die dynamisch generierten Eingabefelder zu speichern.

  3. Elemente dynamisch generieren:

    • Verwendung von document.createElement(), neu Eingabeelemente können erstellt werden.
    • Attribute wie Typ und Name sollten für jede Eingabe festgelegt werden.
    • appendChild() wird verwendet, um jedes Eingabeelement an den Container anzuhängen.

  4. Vorherige Elemente löschen:

    • Um Duplikate zu verhindern, sollten alle vorhandenen untergeordneten Elemente im Container entfernt werden, bevor neue generiert werden. Dies kann mit hasChildNodes() und removeChild() erfolgen.

  5. Zusätzliche Verbesserungen:

    • Sie können Elemente hinzufügen wie Zeilenumbrüche (document.createElement("br")) oder Textknoten (document.createTextNode()), um das Layout zu verbessern.

Codebeispiel

Der folgende Codeausschnitt demonstriert die Implementierung der Lösung:

<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>

Das obige ist der detaillierte Inhalt vonWie generiert man Eingabeformularelemente dynamisch in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript for using Attribute Event append number this input
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann die Ausführung ordnungsgemäß angehalten werden, bis eine asynchrone Funktion abgeschlossen ist?Nächster Artikel：Wie kann die Ausführung ordnungsgemäß angehalten werden, bis eine asynchrone Funktion abgeschlossen ist?

In Verbindung stehende Artikel

Mehr sehen