Fungsi Tidak Kepanggil? Cara Mengatasi Onclick Function Not Defined Javascript

Ditulis oleh JavaScript

Error onclick function not defined berarti browser tidak menemukan fungsi itu di scope global saat tombol diklik. Perbaikan paling cepat: buka Console, samakan nama fungsi di HTML dan JS, lalu pastikan script dimuat sebelum tombol dipakai dan tidak terbungkus module.

Penyebab Onclick Function Not Defined di Browser

Pesan Uncaught ReferenceError: functionName is not defined muncul karena atribut onclick="..." hanya mencari fungsi di objek window.

  • Fungsi dibungkus type="module", IIFE, atau dideklarasikan di dalam DOMContentLoaded sehingga tidak global.
  • Typo nama fungsi, beda huruf besar kecil antara onclick="submitForm()" dan function submitform().
  • File JS gagal dimuat karena salah path, urutan script terbalik, atau error sintaks menghentikan eksekusi.
  • Ada dua fungsi dengan nama sama, fungsi kedua menimpa atau file JS tidak tersimpan.

Tabel Troubleshooting Cepat

Buka DevTools dengan F12, lihat Console untuk pesan error, lalu cek tab Sources apakah file JS benar-benar termuat.

Error/Kondisi Penyebab Solusi
ReferenceError: submitForm is not defined Fungsi tidak global karena module atau scope lokal Ekspos ke window atau pakai addEventListener
Klik tombol tidak bereaksi tanpa error Logic error, nama fungsi mirip tapi salah Samakan ejaan onclick dan deklarasi fungsi
Fungsi ada tapi error hanya kadang muncul Script dimuat setelah HTML atau defer salah Pindah script ke akhir body atau pakai defer

BACA JUGA:

Cara Memperbaiki Onclick Not Defined Langkah per Langkah

Ikuti urutan ini agar sumber masalah ketahuan tanpa menebak.

  1. Samakan nama fungsi di HTML onclick="kirimData()" dengan function kirimData() di JS.
  2. Pastikan file JS termuat. Cek tab Network, perbaiki atribut src bila status 404.
  3. Jika memakai type="module", pindahkan fungsi ke global atau ganti ke addEventListener.
  4. Atur urutan script. Letakkan script sebelum tombol dipakai atau tambah defer.
<!-- SALAH: fungsi di dalam module tidak terbaca onclick -->
<script type="module">
function submitForm() {
  alert("terkirim");
}
</script>
<button onclick="submitForm()">Kirim</button>
<!-- BENAR -->
<button id="btnKirim">Kirim</button>
<script>
function submitForm() {
  alert("terkirim");
}
window.submitForm = submitForm;
document.getElementById("btnKirim").addEventListener("click", submitForm);
</script>

Versi benar bekerja karena fungsi tersedia di window untuk onclick inline, sekaligus terikat langsung lewat addEventListener. Cara kedua lebih aman karena tidak bergantung pada scope global.

Cara Mencegah Error Terulang

  • Gunakan addEventListener setelah DOM siap, misalnya script di akhir body.
  • Hindari onclick inline untuk elemen yang dibuat lewat JS. Gunakan event delegation pada parent seperti document.body.addEventListener("click").
  • Konsisten memakai satu sistem. Pilih semua script biasa atau semua module, jangan campur tanpa pemisah jelas.

FAQ

Kenapa fungsi sudah ada tapi onclick tetap not defined?

Fungsi itu kemungkinan berada di dalam module, IIFE, atau callback sehingga tidak masuk scope global.

Apakah harus memakai window.namaFungsi agar onclick jalan?

Hanya wajib bila script memakai module atau scope tertutup, untuk script biasa cukup deklarasi fungsi top-level.

Kapan pindah dari onclick inline ke addEventListener?

Pindah saat elemen dibuat dinamis, butuh beberapa handler, atau kode mulai sulit dilacak karena HTML dan JS tercampur.

Artikel Terkait