Ketemu Null saat Isi Properti? Begini Cara Mengatasi Cannot Set Properties Of Null JavaScript

Ditulis oleh JavaScript

Pesan Cannot set properties of null berarti kode Anda mencoba mengisi properti seperti textContent, value, atau innerHTML ke variabel yang nilainya null. Perbaikan tercepat: cek nilai objek tepat sebelum baris error, lalu pastikan selector DOM benar dan script berjalan setelah DOM siap.

Penyebab Cannot Set Properties Of Null di JavaScript

Di browser, TypeError ini muncul saat sisi kiri assignment bernilai null. JavaScript tidak bisa menempelkan properti ke null, jadi eksekusi berhenti di baris itu.

  • querySelector atau getElementById tidak menemukan elemen dan mengembalikan null.
  • Script berjalan sebelum DOM siap, misalnya script di head tanpa defer.
  • Selector salah ketik, beda ID, beda class, atau elemen ada di halaman lain.
  • Data API, JSON, atau variabel object belum terisi saat properti langsung ditulis.

Tabel Troubleshooting Error Tersebut

Baca baris error di console. Nama setelah setting menunjukkan properti yang gagal ditulis, misalnya setting ‘textContent’.

Kondisi Penyebab Solusi
querySelector null Selector salah atau elemen belum ada Cek ID/class, pindah script ke akhir body
Data API null Fetch belum selesai atau respons kosong Tunggu data, cek response.ok dan isi objek
Variabel belum diinisialisasi Object masih null saat dipakai Beri nilai awal {} atau guard clause

Bedakan dengan ReferenceError yang berarti variabel tidak dideklarasikan. Logic error tidak menampilkan error, tetapi hasil program salah.

BACA JUGA:

Cara Memperbaiki dengan Pengecekan Null yang Tepat

  1. Reproduksi error lalu klik nomor baris di console browser.
  2. Tambahkan console.log(el) sebelum baris error untuk melihat apakah nilainya null.
  3. Perbaiki selector atau timing DOM, misalnya gunakan DOMContentLoaded atau defer.
  4. Tambah guard clause agar kode berhenti aman bila elemen atau data kosong.
// SALAH: el bisa null
const el = document.querySelector("#hasil");
el.textContent = "Halo";
// BENAR
const el = document.querySelector("#hasil");
if (!el) return;
el.textContent = "Halo";

Pola sama berlaku untuk object. Pastikan object ada sebelum menambah properti.

// BENAR untuk object
let user = null;
user = user || {};
user.nama = "Budi";

Gunakan if atau early return bila elemen memang boleh tidak ada. Gunakan object default bila struktur datanya pasti. Jangan menutup semuanya dengan try/catch kosong karena bug selector ikut hilang.

Cara Mencegah Error Null Muncul Lagi

  • Samakan ID di HTML dan JavaScript sebelum menjalankan kode.
  • Letakkan script di akhir body atau tambah atribut defer.
  • Validasi data API sebelum dipakai, terutama properti bertingkat.

FAQ

Kenapa querySelector menyebabkan cannot set properties of null?

Karena querySelector mengembalikan null bila elemen tidak ditemukan, lalu kode tetap menulis properti ke hasilnya.

Apakah optional chaining memperbaiki error ini?

el?.textContent = … tidak valid untuk assignment, gunakan pengecekan if atau early return.

Bagaimana mencegah error null muncul lagi?

Pastikan selector benar, DOM sudah siap, dan data API dicek sebelum properti ditulis.

Artikel Terkait