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

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