getElementById Selalu Salah Ambil? Cara Mengatasi Duplicate ID HTML Javascript

Ditulis oleh JavaScript

Perbaikan tercepat untuk getElementById yang selalu salah ambil adalah mengganti atribut ganda menjadi class, lalu seleksi semua elemennya dengan querySelectorAll. Browser memang hanya mengembalikan satu elemen untuk ID, jadi ID yang sama di beberapa tempat pasti membuat kode menunjuk target yang keliru.

Penyebab Duplicate ID Bikin Seleksi JavaScript Salah

Spesifikasi HTML mengharuskan ID bersifat unik dalam satu dokumen. JavaScript di browser mengikuti aturan itu saat mencari elemen.

  • getElementById hanya mengembalikan elemen pertama yang cocok, elemen lain dengan ID sama diabaikan.
  • querySelector("#id") berperilaku sama, ia berhenti di kecocokan pertama.
  • ID ganda sering muncul dari copy paste markup dan dari loop render tanpa pembeda, misalnya daftar tombol atau input dibuat dengan template sama.

Error/Kondisi, Penyebab, dan Solusi

Gejala duplicate ID sering terlihat seperti logic error, bukan pesan error merah di console.

Error/Kondisi Penyebab Solusi
getElementById salah target Dua elemen memakai ID sama Buat ID unik, seleksi ulang
Event hanya jalan di satu tombol Listener menempel ke elemen pertama Pakai class plus loop atau delegasi
Label dan query menunjuk input keliru for dan #id cocok ke input pertama Bedakan id tiap input

BACA JUGA:

Cara Memperbaiki Duplicate ID yang Sudah Terlanjur Ada

Cari semua ID ganda, lalu ubah seleksinya:

  1. Buka DevTools dan cari id="nama-id" yang muncul lebih dari sekali.
  2. Ubah atribut berulang menjadi class, biarkan ID hanya untuk elemen yang benar-benar tunggal.
  3. Ganti getElementById menjadi querySelectorAll(".nama-class") untuk memproses semua elemen.
  4. Tambah data-* bila tiap elemen butuh identitas, misalnya data-id="1".
<!-- SALAH -->
<button id="btn">Simpan</button>
<button id="btn">Hapus</button>

<!-- BENAR -->
<button class="btn" data-aksi="simpan">Simpan</button>
<button class="btn" data-aksi="hapus">Hapus</button>

<script>
document.querySelectorAll(".btn").forEach((tombol) => {
  tombol.addEventListener("click", () => {
    console.log(tombol.getAttribute("data-aksi"));
  });
});
</script>

querySelectorAll mengembalikan semua elemen yang cocok untuk di-loop. getAttribute membaca nilai data-aksi tiap tombol. Untuk tombol yang dibuat belakangan lewat JavaScript, pasang satu listener di induknya memakai event delegation.

Cara Mencegah ID Ganda Terulang

  • Satu ID untuk satu elemen, daftar berulang selalu pakai class.
  • Saat render dinamis, buat ID unik dengan akhiran angka seperti item-1, item-2.
  • Validasi markup dengan pencari duplikat sebelum deploy, bisa lewat validator HTML atau script pengecekan ID.

FAQ

Apakah ID boleh sama di HTML?

Tidak, ID harus unik dalam satu halaman agar seleksi dan label bekerja benar.

Kenapa getElementById hanya mengambil satu elemen?

Method itu dirancang untuk ID unik sehingga selalu mengembalikan elemen pertama yang cocok.

Apa pengganti ID untuk banyak elemen sama?

Gunakan class bersama querySelectorAll, tambah data-* bila perlu pembeda.

Artikel Terkait