Jangan Sentuh .Style Dulu: Cara Mengatasi Style Of Undefined Javascript

Ditulis oleh JavaScript

Error Cannot read properties of undefined (reading ‘style’) berarti kode membaca .style dari variabel yang isinya undefined. Perbaikan tercepat: cek hasil querySelector atau getElementById dengan console.log sebelum menyentuh .style, lalu perbaiki selector atau waktu eksekusi script.

Penyebab Style of Undefined Muncul di Browser

Browser menampilkan TypeError ini saat objek di sebelah kiri .style belum pernah diisi elemen DOM. Kondisinya murni runtime di browser, bukan SyntaxError.

Bedakan dua kasusnya. style of undefined umumnya berasal dari variabel biasa, indeks array, atau fungsi tanpa return. style of null umumnya berasal dari querySelector atau getElementById yang tidak menemukan elemen.

Penyebab paling sering adalah selector salah ketik, ID memakai nama berbeda antara HTML dan JavaScript, script berjalan sebelum DOM siap, atau elemen diambil dari daftar dinamis yang belum dirender.

Tabel Troubleshooting Cepat

Cetak dulu elemennya, jangan langsung menebak. Satu baris console.log(el) sudah memperlihatkan apakah masalahnya selector, timing, atau data.

Error/Kondisi Penyebab Solusi
style dari undefined Variabel kosong, indeks array salah Periksa assignment dan nilai return fungsi
style dari null Selector tidak cocok Samakan ID atau class dengan HTML
Elemen kadang ada, kadang error Script jalan sebelum DOM siap Pindah script ke akhir body atau pakai DOMContentLoaded
  • Gunakan console.log(banner) tepat sebelum baris .style.
  • Tambahkan guard sederhana seperti if (!banner) return;.
  • Periksa tab Elements untuk memastikan ID benar benar ada.

BACA JUGA:

Cara Memperbaiki Error Style Undefined

Ikuti urutan ini agar sumber masalah ketemu, bukan hanya gejalanya yang hilang.

  1. Pastikan elemen dengan ID tersebut memang ada di HTML.
  2. Perbaiki selector, termasuk tanda pagar untuk ID dan titik untuk class.
  3. Pindahkan script ke sebelum penutup body.
  4. Jika script harus di head, bungkus akses DOM dengan DOMContentLoaded.
  5. Uji ulang dengan guard sebelum menulis properti style.
// SALAH: box bisa undefined atau null
box.style.display = "none";

// BENAR
const box = document.querySelector("#banner");
if (!box) {
  console.log("Elemen #banner tidak ditemukan");
} else {
  box.style.display = "none";
}

Baris querySelector("#banner") mengambil elemen pertama yang cocok. Guard if (!box) menghentikan kode bila elemen tidak ada. Baris terakhir baru aman mengubah tampilan karena box sudah pasti elemen.

Cara Mencegah Error Terulang

  • Selalu cek null sebelum mengakses properti DOM dari hasil query.
  • Query ulang elemen dinamis setelah dibuat, jangan memakai referensi lama.
  • Jangan memanggil .style langsung ke NodeList, akses dulu indeksnya atau loop.
  • Pakai classList.add untuk perubahan tampilan berulang agar CSS tetap terpusat.
  • Pakai textContent bila hanya perlu mengubah teks, bukan gaya visual.

FAQ

Kenapa element.style error padahal ID ada di HTML?

Kemungkinan script berjalan sebelum elemen dirender atau penulisan selector berbeda satu huruf.

Apakah optional chaining cukup untuk error style of undefined?

box?.style.display mencegah crash, tetapi elemen tetap tidak berubah sehingga penyebabnya tetap perlu diperbaiki.

Kapan memakai DOMContentLoaded untuk akses style?

Pakai saat script berada di head, memakai modul terpisah, atau manipulasi harus siap segera setelah struktur HTML selesai diparsing.

Artikel Terkait