Bagaimanakah Saya Boleh Menjana Elemen Borang Input Secara Dinamik Berdasarkan Input Pengguna?

Elemen Borang Input Menjana Secara Dinamik Berdasarkan Input Pengguna

Apabila dibentangkan dengan tugas menambah bilangan elemen borang input tertentu, adalah wajar untuk mencari penyelesaian yang mudah dan cekap .

Dalam senario ini, kami mempunyai struktur HTML yang terdiri daripada medan input di mana pengguna memasukkan nilai yang mewakili bilangan medan input yang dikehendaki. Apabila mengklik pautan, bilangan medan input yang sepadan hendaklah dijana secara dinamik.

Mendapatkan Masukan Pengguna

Untuk mendapatkan semula nilai integer yang dimasukkan oleh pengguna, kita boleh menggunakan pengendali acara onclick dilampirkan pada pautan. Dengan memberikan ID unik pada medan input, kami boleh mengakses nilainya menggunakan document.getElementById():

<code class="javascript">var number = document.getElementById("member").value;</code>

Mencipta dan Menambah Elemen Input

Untuk cekap tambah elemen input, kami mengesyorkan anda membuat elemen kontena (cth.,

) di mana anda akan menambahkan medan input yang baru dibuat. Menggunakan document.createElement(), kita boleh mencipta elemen input, menentukan atributnya dan menambahkannya pada bekas:

<code class="javascript">var container = document.getElementById("container");

for (i = 0; i < number; i++) {
  // Append a text node
  container.appendChild(document.createTextNode("Member " + (i + 1)));

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

  // Append a line break
  container.appendChild(document.createElement("br"));
}</code>

Pendekatan ini membolehkan anda mengisi kontena secara dinamik berdasarkan input pengguna. Pertimbangkan untuk menggunakan hasChildNodes() dan removeChild() untuk mengosongkan bekas sebelum menambah elemen baharu untuk memastikan hanya medan yang berkaitan dipaparkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjana Elemen Borang Input Secara Dinamik Berdasarkan Input Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html Integer using Event append number this input Access

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