Saya membuat program di mana saya memilih beberapa elemen di pilih dan saya membuat beberapa hasil melalui skrip ketika tombol ditekan. Hasilnya diambil dari database dan disimpan dalam array. Untuk setiap elemen dalam array, saya membuat beberapa elemen li dan kemudian menambahkannya ke div, yang ditampilkan setelah tombol ditekan.

Berikut adalah contoh biola: https://jsfiddle.net/Khan1016/mkfpezy8/1/

Ini adalah pratinjau skrip:

document.getElementById("b").onclick = function () {
  $(".result").show();


  var list1= ["a","b","c"];

  var text="";

  var doc = document.getElementById("result");   
             
  for (i = 0; i < list1.length; i++) {
    text = list1[i];
    var element = document.createElement("li");
    element.textContent = text;
    doc.appendChild(element);
  }
  list1.splice(0,list1.length);
}

Saya telah mencoba untuk "mengatur ulang" array dan teks, tetapi sepertinya tidak berhasil. Pertanyaan saya adalah, bagaimana saya bisa memperbarui elemen li ketika saya menekan tombol untuk kedua kalinya, alih-alih menambahkan li baru ke yang sebelumnya?

1
name 8 Januari 2021, 12:46

3 jawaban

Jawaban Terbaik

Anda dapat menggunakan $(".result").empty(); untuk menghapus konten seperti:

document.getElementById("b").onclick = function () {
  $(".result").empty();
  $(".result").show();
  var list1= [
  String.fromCharCode(97+Math.floor(Math.random() * 26)),
  String.fromCharCode(97+Math.floor(Math.random() * 26)),
  String.fromCharCode(97+Math.floor(Math.random() * 26))
  ];

  var text="";

  var doc = document.getElementById("result");   
             
  for (i = 0; i < list1.length; i++) {
    text = list1[i];
    var element = document.createElement("li");
    element.textContent = text;
    doc.appendChild(element);
  }
  list1.splice(0,list1.length);
}
.result {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" value="b" id="b">Button</button>
<h1>This are the results:</h1>
<div class="result" id="result"></div>

Saya menambahkan String.fromCharCode(97+Math.floor(Math.random() * 26)) untuk hasil simulasi dengan huruf acak

1
Simone Rossaini 8 Januari 2021, 09:52

Gunakan sakelar untuk tampilkan dan sembunyikan:

document.getElementById("b").onclick = function () {
   
        $( ".result" ).toggle();
}
0
corsaro 8 Januari 2021, 09:58

Jika saya mengerti Anda, Anda hanya perlu menghapus div result yang ada. Kode Anda sedikit membingungkan karena Anda mencampur JS dan jquery asli - Anda benar-benar dapat menyederhanakannya secara besar-besaran.

document.getElementById("b").onclick = function() {
  const result = $(".result");
  result.empty();
  result.show();
  ["a", "b", "c"].forEach(x => result.append(`<li>${x}</li>`));
}
0
Fraser 8 Januari 2021, 10:02