Wie generiert man Eingabeformularelemente dynamisch in JavaScript?-js-Tutorial-php.cn

Wie generiert man Eingabeformularelemente dynamisch in JavaScript?

Barbara Streisand

Freigeben： 2024-10-28 06:38:02

Original

348 Leute haben es durchsucht

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

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

Nach dem Login kopieren

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!