Perbaiki Klik Mati dengan Cara Mengatasi Event Listener Tidak Berjalan Javascript

Ditulis oleh JavaScript

Tombol diklik tapi tidak ada reaksi biasanya karena addEventListener terpasang ke elemen yang null, script jalan sebelum DOM siap, atau elemen diganti saat render ulang. Cek dulu console.log(tombol). Kalau hasilnya null, perbaiki selector atau waktu eksekusi script, listener hampir pasti langsung jalan lagi.

Penyebab Event Listener Tidak Berjalan di Browser

Kasus paling sering adalah selector keliru. ID ditulis sebagai class, huruf besar kecil tidak cocok, atau elemen memang belum ada di halaman. Browser tidak melempar error yang jelas untuk beberapa kondisi ini, klik saja terasa mati.

  • Elemen null karena querySelector salah atau script di head dieksekusi sebelum DOM selesai dimuat.
  • Listener hilang setelah innerHTML ditulis ulang atau komponen dirender ulang, karena node lama diganti node baru.
  • Event tertahan oleh stopPropagation, tertutup elemen transparan, atau tombol bertipe submit memuat ulang halaman sebelum handler selesai.

Tabel Diagnosis Cepat

Buka DevTools, lalu cocokkan gejala di bawah dengan pemeriksaan paling cepat.

Kondisi Penyebab Solusi
Klik mati, console menunjukkan null Selector salah atau DOM belum siap Perbaiki selector, pindah script ke akhir body atau pakai DOMContentLoaded
Tombol lama bisa diklik, tombol baru tidak Listener dipasang sebelum elemen dibuat Pasang ulang setelah render atau pakai event delegation
Handler jalan dua kali Listener terdaftar ganda Pastikan registrasi sekali, gunakan removeEventListener sebelum pasang ulang

BACA JUGA:

Cara Memperbaiki Event Listener yang Mati

Ikuti urutan ini agar akar masalah ketemu, bukan sekadar coba-coba:

1. Pastikan elemen ada dengan console.log(document.querySelector("#kirim")).
2. Pindah tag script ke sebelum penutup body atau bungkus kode dengan DOMContentLoaded.
3. Perbaiki selector, bedakan #kirim untuk ID dan .kirim untuk class.
4. Untuk tombol dinamis, pasang listener ke induk yang tetap.

// Salah: elemen belum ada saat kode jalan
document.querySelector("#kirim").addEventListener("click", simpan);

// Benar
document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#kirim").addEventListener("click", simpan);
});

// Delegation untuk tombol dinamis
document.querySelector("#daftar").addEventListener("click", (e) => {
  if (e.target.matches(".hapus")) {
    e.target.closest("li").remove();
  }
});

Pola kedua memeriksa klik di induk #daftar, lalu meneruskan ke tombol .hapus yang baru dibuat. Listener tidak perlu dipasang ulang setiap render.

  • Klik tombol utama dan lihat handler terpanggil di console.
  • Tambah satu tombol baru lewat JavaScript, lalu klik tanpa refresh.
  • Periksa tab Elements untuk memastikan tidak ada overlay menutup tombol.

Cara Mencegah Listener Hilang Lagi

Pasang listener setelah proses render selesai. Hindari menulis ulang innerHTML pada induk yang sudah punya listener, tambah node anak dengan appendChild atau insertAdjacentHTML.

  • Gunakan satu delegation di container untuk semua tombol tambah, hapus, dan edit.
  • Simpan referensi fungsi handler bila listener perlu dilepas dengan removeEventListener.
  • Untuk form, dengarkan submit di form lalu panggil preventDefault sebelum validasi.

FAQ

Kenapa addEventListener tidak error tapi klik tidak jalan?

Kemungkinan targetnya null, tertutup elemen lain, atau handler terdaftar pada node lama yang sudah diganti.

Bagaimana agar tombol baru dari JavaScript bisa diklik?

Pasang delegation pada induk tetap, lalu filter klik memakai matches.

Apakah script di head membuat event listener gagal?

Ya bila dieksekusi sebelum elemen ada, pindah ke akhir body atau tunggu DOMContentLoaded.

Artikel Terkait