Penyebab dan Cara Mengatasi Change Event Tidak Terpanggil Javascript

Ditulis oleh JavaScript

Change event tidak terpanggil biasanya karena selector mengarah ke elemen yang tidak ada, script berjalan sebelum DOM siap, atau nilai diubah lewat kode tanpa memicu event. Periksa console dulu, pastikan tidak ada TypeError: Cannot read properties of null dari addEventListener, lalu cek apakah input dibuat dinamis setelah listener dipasang.

Penyebab Change Event Tidak Terpanggil di Browser

Penyebab paling sering ada pada timing dan target listener:

  • Script jalan sebelum DOM siap sehingga querySelector mengembalikan null.
  • ID atau class salah tulis, ada spasi, huruf besar kecil beda, atau ID ganda.
  • Listener dipasang ke elemen statis, padahal input dibuat belakangan lewat JavaScript.
  • Nilai diubah lewat kode seperti input.value = "baru" tanpa dispatchEvent.
  • Elemen berstatus disabled, salah tipe elemen, atau tertutup elemen lain sehingga tidak bisa berubah.

Tabel Troubleshooting Change Event

Cocokkan kondisi form dengan tabel ini sebelum mengubah banyak kode:

Kondisi Penyebab Solusi cepat
Semua input tidak merespons Selector salah atau DOM belum siap Cek console.log(el) dan pindah script ke akhir body
Checkbox, radio, select diam Listener hanya untuk input text awal Pasang ulang listener atau pakai delegasi ke parent
Value diubah lewat kode Perubahan programatik tidak memicu change Panggil dispatchEvent(new Event("change"))
Input file tidak jalan dua kali File sama dipilih ulang Kosongkan input.value setelah diproses

BACA JUGA:

Cara Memperbaiki dengan Langkah Bernomor dan Kode

Ikuti urutan ini agar akar masalah ketemu:

  1. Pastikan DOM siap dengan menaruh script setelah elemen atau memakai DOMContentLoaded.
  2. Cek selector lewat console.log dan pastikan hasilnya bukan null.
  3. Pasang listener change langsung untuk form statis.
  4. Gunakan delegasi event bila input dibuat dinamis.
  5. Picu event manual bila nilai diubah lewat kode.
// SALAH: elemen belum ada saat kode jalan
const kota = document.querySelector("#kota");
kota.addEventListener("change", () => {
  console.log(kota.value);
});

// BENAR: tunggu DOM, lalu tangani dinamis dengan delegasi
document.addEventListener("DOMContentLoaded", () => {
  document.body.addEventListener("change", (e) => {
    if (e.target.id === "kota") {
      console.log(e.target.value);
    }
  });
});

// Perubahan via kode perlu event manual
const kota = document.querySelector("#kota");
kota.value = "Jakarta";
kota.dispatchEvent(new Event("change"));

Delegasi memakai satu listener di parent, jadi input baru tetap tertangkap. Panggilan dispatchEvent membuat handler change berjalan normal.

Cara Mencegah Agar Tidak Terulang

  • Selalu pasang script setelah DOM atau bungkus dengan DOMContentLoaded.
  • Gunakan event delegation untuk daftar dinamis dan hindari ID ganda.
  • Pakai textContent bila hanya menampilkan teks, lalu uji di checkbox, select, dan input file.

FAQ

Kenapa change di input text baru jalan setelah blur?

Browser memicu change pada input text setelah nilai dikonfirmasi dan fokus lepas.

Kenapa change tidak jalan saat value diubah lewat JavaScript?

Perubahan lewat kode tidak memicu event bawaan, jadi panggil dispatchEvent manual.

Kapan memakai input bukan change untuk form?

Pakai input bila butuh respons tiap ketikan, terutama validasi langsung dan pencarian.

Artikel Terkait