cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menjana Elemen Borang Input secara Dinamik dalam JavaScript?

Bagaimana untuk Menjana Elemen Borang Input secara Dinamik dalam JavaScript?

Barbara Streisand
Barbara Streisandasal
2024-10-28 06:38:02348semak imbas

How to Dynamically Generate Input Form Elements in JavaScript?

Mencipta Elemen Borang Input Secara Dinamik

Artikel ini membincangkan cabaran pengaturcaraan biasa: mencipta elemen borang input secara dinamik berdasarkan input pengguna. Matlamatnya adalah untuk menyediakan penyelesaian yang jelas dan mudah untuk pemula, menggunakan JavaScript.

Masalahnya

Halaman web termasuk medan input teks di mana pengguna boleh memasukkan nombor. Setelah mengklik pautan yang sepadan, halaman tersebut harus menjana secara dinamik medan input sebanyak itu untuk pengguna memberikan maklumat tambahan. Pengguna boleh memasukkan maksimum 10 nilai.

Memahami Penyelesaian

  1. Mendapatkan Masukan Pengguna:

    • An pengendali acara onclick digunakan pada pautan yang bertanggungjawab untuk menjana medan input.
    • Dalam pengendali acara, nilai yang dimasukkan dalam medan input teks boleh diambil menggunakan document.getElementById().

  2. Mencipta Bekas:

    • Elemen bekas, seperti div dengan atribut id (cth., "bekas"), diperlukan untuk memegang medan input yang dijana secara dinamik.

  3. Menjana Elemen Secara Dinamik:

    • Menggunakan document.createElement(), baharu elemen input boleh dibuat.
    • Atribut seperti jenis dan nama hendaklah ditetapkan untuk setiap input.
    • appendChild() digunakan untuk menambahkan setiap elemen input pada bekas.

  4. Mengosongkan Elemen Sebelumnya:

    • Untuk mengelakkan pendua, sebarang elemen anak sedia ada dalam bekas hendaklah dialih keluar sebelum menjana elemen baharu. Ini boleh dilakukan menggunakan hasChildNodes() dan removeChild().

  5. Peningkatan Tambahan:

    • Anda boleh menambah elemen seperti pemisah baris (document.createElement("br")) atau nod teks (document.createTextNode()) untuk memperbaik reka letak.

Contoh Kod

Coretan kod berikut menunjukkan pelaksanaan penyelesaian:

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

Atas ialah kandungan terperinci Bagaimana untuk Menjana Elemen Borang Input secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript for using Attribute Event append number this input
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Menjeda Perlaksanaan Dengan Anggun Sehingga Fungsi Asynchronous Selesai?Artikel seterusnya：Bagaimana untuk Menjeda Perlaksanaan Dengan Anggun Sehingga Fungsi Asynchronous Selesai?

Artikel berkaitan

Lihat lagi