Menyebarkan beberapa div berdasarkan input angka

Question

Saya mencoba menampilkan beberapa div berdasarkan pada input nomor pengguna. Misalnya jika pengguna memilih 3 maka 3 div akan ditampilkan.

Saya berhasil membuatnya bekerja tetapi saya perlu mengatur ID untuk setiap div secara dinamis untuk nilai yang dikembalikan, dan untuk mengatur nomor di sebelah kata mobil misalnya Mobil 1 Mobil 2 Mobil 3.

        <div class="col-md-12">
            <div id="content"></div>
            <script>
                function myFunction(){
                var n = Number(document.getElementById("nbchambre").value);
                var content = document.getElementById('content');
                content.innerHTML="";
                for(var count = 1; count < n+1; count++){
                var div = document.createElement('div');
                div.innerHTML = 'Car : <input type="date" name="bday">';
                content.appendChild(div);
                    }
                }
            </script>
        </div>

Hasil harus jika pengguna menempatkan 3 mobil 1: mobil 2: mobil 3:

javascript jquery html

0

MuaathAli 31 Mei 2019, 17:16

Answer 1

Anda hanya perlu menggabungkan count ke dalam string, menetapkannya ke atribut id dan teks.

function myFunction() {
  var n = Number(document.getElementById("nbchambre").value);
  var content = document.getElementById('content');
  content.innerHTML = "";
  
  for (var count = 1; count < n + 1; count++) {
    var div = document.createElement('div');
    div.innerHTML = 'Car ' + count + ': <input type="date" name="bday" id="car' + count + '">';
    content.appendChild(div);
  }
}

myFunction();

<div class="col-md-12">
  <div id="content"></div>
</div>

<input type="text" id="nbchambre" value="5" />

2

2 revs 31 Mei 2019, 14:22

Answer 2

Anda dapat melakukannya hanya dengan menambahkan count dalam string

function myFunction() {
  var n = Number(document.getElementById("nbchambre").value);
  var content = document.getElementById('content');
  content.innerHTML = "";
  for (var count = 1; count < n + 1; count++) {
    var div = document.createElement('div');
    div.innerHTML = `Car ${count}: <input type="date" name="bday">`;
    content.appendChild(div);
  }
}

document.querySelector('#nbchambre').addEventListener("input", myFunction)

<input id="nbchambre">
<div class="col-md-12">
  <div id="content"></div>
</div>

0

Shridhar Sharma 31 Mei 2019, 14:22

Menyebarkan beberapa div berdasarkan input angka

2 jawaban

Pertanyaan-pertanyaan Terkait

Pertanyaan baru