Tech: getElementById Hanya Akan Ambil Yang Pertama

Ada satu masalah petang semalam kepada seorang intern yang mana dia mahu membuat fungsi add to chart menggunakan javascript dan jquery kepada item yang diletakkan di dalam owl carousel tetapi yang peliknya daripada 20 item, hanya 10 item pertama sahaja yang boleh dimasukkan, selebihnya tidak dapat. dia memanggil satu function javascript apabila butang add to cart tersebut di tekan. Kita anggapkan sebagai addToChart(counter, item.id). Aku cuba untuk menjalankan secara manual dengan meletakkan kod tersebut di dalam snippet dan menjalankannya, function tersebut berjalan dengan jayanya. Maka kemungkinan function tersebut bermasalah boleh ditolak.

Aku cuba sekali lagi untuk menjalankan secara manual tetapi kali ini untuk mengubah textContent elemen tersebut dengan membuat $('#item-11').html('testing') dan fungsi tersebut juga tiada masalah. Cuma yang anehnya tiada sebarang perubahan yang terjadi kepada paparan. Tetapi jika di cari kembali di dalam element tab, perubahan tersebut berlaku. Cuma bukan pada tempatnya.

Setelah dicari lebih lanjut, aku perasan own carousel akan membuat clone separuh daripada senarai di atas senarai yang asal. Contohnya begini;

Senarai asal

  • item-1
  • item-2
  • item-3
  • item-4

Senarai tambahan

  • item-3 (clone)
  • item-4 (clone)
  • item-1
  • item-2
  • item-3
  • item-4
  • item-1 (clone)
  • item-2 (clone)

Aku nampak kerana mahu menjadikan slide tersebut tidak berpecah atau terpisah semasa mahu membuat pusingan. Dan disebabkan itu juga id yang mahu dibuat tidak dapat dimasukkan. Maka aku mencadangkan tukar kepada class dan masalah tersebut selesai.

Aku masih musykil kerana jika id tersebut diletakkan sebagai item-3 clone sepatutnya adalah unik berbanding item-3 sahaja. Dan aku telah cuba dengan membuat contoh mudah.

<div class="ul">
    <li id="basket-3">3 clone</li>
    <li id="basket-4">4 clone</li>
    <li id="basket-1">1</li>
    <li id="basket-2">2</li>
    <li id="basket-3">3</li>
    <li id="basket-4">4</li>
    <li id="basket-1">1 clone</li>
    <li id="basket-2">2 clone</li>
</div>

<script>
   $(function(){
        console.log($('#basket-3').text());
        console.log($('#basket-4').text());
        console.log($('#basket-3').attr('id', 'basket-3 clone'));
        console.log($('#basket-4').attr('id', 'basket-4 clone'));
        console.log($('#basket-3').text());
        console.log($('#basket-4').text());
   })
</script>

Dan daripada log, aku nampak sepert ini yang mana aku nampak mengikut konsep javascript yang biasa. Hari ini aku akan tengok balik apa masalah sebenarnya daripada own carousel tu.

javascript get element by id

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.