Cara Mengatasi addEventListener Of Null Javascript dengan Cek Elemen

Ditulis oleh JavaScript

Cek elemen sebelum pasang addEventListener. Error Cannot read properties of null (reading 'addEventListener') artinya variabel yang kamu panggil bukan elemen DOM, melainkan null karena getElementById atau querySelector tidak menemukan apa pun. Perbaikannya: samakan selector dengan HTML, pastikan DOM sudah siap, lalu tambah guard if (el).

Penyebab Cannot Read Properties Of Null di addEventListener

Browser melempar TypeError ini saat kode memanggil .addEventListener pada nilai null. Selector tidak menghasilkan node elemen.

  • Selector salah ketik: ID di JS btn-kirim tapi di HTML btnKirim, lupa tanda # untuk ID atau . untuk class, salah huruf besar kecil.
  • Script jalan sebelum DOM siap: tag script di head tanpa defer mengeksekusi JS padahal tombol belum dirender.
  • Elemen ada di halaman lain: JS dipakai bersama di banyak halaman, tapi tombol cuma ada di satu halaman sehingga hasilnya null di halaman lain.
  • Elemen dibuat dinamis: tombol muncul setelah fetch data, setelah klik tertentu, atau dirender framework, jadi belum ada saat listener dipasang.

Tabel Cek Cepat Berdasarkan Kondisi Error

Lihat kondisi di bawah ini sebelum mengubah kode.

Error/Kondisi Penyebab Solusi
Selector tidak ketemu ID atau class beda dengan HTML Cocokkan string selector dengan atribut HTML
DOM belum dimuat Script di head tanpa penunggu DOM Pindah script ke akhir body atau pakai DOMContentLoaded
Elemen dinamis Node baru dibuat setelah listener dipasang Pasang listener ulang atau pakai event delegation

BACA JUGA:

Perbaiki addEventListener Null dengan Urutan yang Benar

Ikut urutan ini agar akar masalah hilang, bukan cuma disembunyikan.

  1. Buka HTML dan pastikan selector sama persis, termasuk tanda # dan huruf besar kecil.
  2. Pindahkan script ke akhir body atau bungkus kode dengan DOMContentLoaded.
  3. Tambah cek null sebelum memanggil addEventListener.
// SALAH: tombol belum tentu ada
const btn = document.querySelector("#btn-kirim");
btn.addEventListener("click", kirimData);

// BENAR
document.addEventListener("DOMContentLoaded", () => {
  const btn = document.querySelector("#btn-kirim");
  if (!btn) return;
  btn.addEventListener("click", kirimData);
});

Kode benar menunggu DOM siap lalu menghentikan proses bila tombol tidak ditemukan. Untuk daftar tombol yang dibuat belakangan, pasang satu listener di induknya lalu periksa event.target. Itu pola event delegation.

Cegah Error Terulang pada Project Berikutnya

  • Selalu verifikasi hasil querySelector tidak null sebelum dipakai.
  • Samakan penamaan ID di HTML dan JS, idealnya salin tempel agar tidak salah ketik.
  • Tangani konten dinamis dengan delegation, bukan memasang listener satu per satu tiap render.
  • Jangan hanya mengandalkan btn?.addEventListener(...). Kode berhenti error, tapi tombol tetap tidak berfungsi bila penyebab selector atau timing belum diperbaiki.

FAQ

Kenapa addEventListener error padahal ID sudah benar?

Umumnya script berjalan sebelum elemen dirender, jadi pindahkan script ke akhir body atau pakai DOMContentLoaded.

Apakah script harus selalu di akhir body?

Tidak wajib, script di head tetap aman bila memakai defer atau menunggu DOMContentLoaded.

Bagaimana menangani tombol yang dibuat dinamis?

Pasang listener di elemen induk yang statis lalu filter event.target dengan closest().

Artikel Terkait