Cara Memperbaiki 'Uncaught TypeError: Cannot read property of null' di JavaScript
Coding
Pernah mendapatkan eror “Uncaught TypeError: Cannot read property ‘offsetTop’ of null” atau “Cannot read property of null” di console browser? Atau sering? Sekarang mari kita bahas penyebab dan cara mengatasinya.
Penyebab “Cannot read property of null” di JavaScript dan Solusinya
Error “Cannot read property of null” di JavaScript biasa terjadi karena beberapa penyebab:
-
Elemen tidak ada
Saat halaman dimuat, JavaScript mencoba mengakses elemen/properti yang tidak ada atau belum dideklarasikan. Contoh, kita ingin mengubah warna huruf
<h1>denganid="hanyaContoh"menjadi merah.<script> const namaVariabel = document.getElementById('hanyaContoh'); namaVariabel.style.color = 'red'; </script>Dalam contoh di atas, browser akan menjalankan kode JavaScript dan menargetkan
HTMLdenganid="hanyaContoh". Tetapi, setelah mencari-cari di semua halaman, tidak ada elemen apa pun denganid="hanyaContoh". Maka browser akan memberikan error code “Uncaught TypeError: Cannot read properties of null”.Solusi:
Pastikan elemen yang Anda targetkan memang ada. Periksa dan cocokkan kembali nama class atau id antara JavaScript dan HTML. Kadang, hal ini hanya disebabkan oleh human error atau typo. Misal, di HTML ditulis
id="hanya-contoh", sedangkan di JS ditulis'hanyaContoh'.Apabila kode JavaScript yang ditulis memang betul-betul tidak dibutuhkan oleh elemen manapun, lebih baik hapus atau komentari.
-
Elemen belum dimuat
Kode JavaScript diproses dari atas ke bawah. Kode yang paling atas akan diproses terlebih dahulu kemudian kode di bawahnya. Begitu juga dengan browser. Dalam proses pemuatan/menampilkan halaman (rendering), browser melakukannya dari atas ke bawah. Contoh:
<script> const namaVariabel = document.getElementById('hanyaContoh'); namaVariabel.style.color = 'red'; </script> <h1 id="hanyaContoh">Judul Artikel</h1>Kode JS-nya sudah benar, HTML atau elemen dengan
id="hanyaContoh"benar-benar ada. Tetapi, karena JS sudah dijalankan sementara elemen yang kita targetkan ada di bawahnya dan belum dimuat, browser menganggap elemen tersebut tidak ada.Solusi:
Pindahkan kode JavaScript menjadi di bawah elemen. Itu sebabnya juga JS memang idealnya diletakkan di bawah semua elemen yaitu sebelum
</body>.<h1 id="hanyaContoh">Judul Artikel</h1> <script> const namaVariabel = document.getElementById('hanyaContoh'); namaVariabel.style.color = 'red'; </script>Solusi lainnya adalah dengan menggunakan event. Bungkus semua kode JavaScript dengan
document.addEventListener("DOMContentLoaded", function() {...}). Event ini memerintahkan browser agar menjalankan kode JavaScript setelah semua halaman dimuat, tetapi sebelum image dan CSS.<!-- JavaScript --> <script> document.addEventListener("DOMContentLoaded", function () { const namaVariabel = document.getElementById("hanyaContoh"); namaVariabel.style.color = "red"; }); </script> <!-- HTML --> <h1 id="hanyaContoh">Judul Artikel</h1>Dengan begini, meskipun elemen diletakkan sesudah JavaScript, kode JS tidak akan dijalankan atau dieksekusi oleh browser sebelum semua elemen dimuat. Cara ini juga berguna bila JavaScript memang harus diletakkan di dalam tag
<head>.Note: TIDAK SEMUA kode JavaScript perlu dibungkus denganDOMContentLoaded. -
Elemennya ada tapi tidak di sana
Ini biasa terjadi apabila kita menggunakan JavaScript secara modular. Misalnya, karena sebuah script hanya dibutuhkan di halaman home, maka kita hanya memasukkan script tersebut di halaman home sehingga JavaScript tak perlu dimuat di seluruh halaman website.
Nah, pada praktiknya, dalam metode seperti ini bisa juga terjadi kesalahan peletakan. Misalnya, script malah diletakkan di halaman about sehingga menyebabkan eror “Cannot read property of null”.
Solusi:
Periksa kembali peletakan kode JavaScript dan masukkan kode tersebut di halaman yang sesuai.
Eror “Cannot read property of null” di JavaScript juga bisa terjadi apabila kita menggunakan JavaScript secara global (satu file untuk seluruh website) dan hanya menargetkan satu atau beberapa elemen yang hanya ada di halaman tertentu. Misal, elemen yang kita targetkan hanya ada di halaman home, about, dan single post. Kode itu akan menyebabkan eror di halaman lain.
Solusi:
Tulis ulang kode JavaScript dengan menggunakan pengkodisian.
<script> const namaVariabel = document.getElementById('hanyaContoh'); if (namaVariabel) { namaVariabel.style.color = 'red'; } </script>Dalam kode di atas, kita memeriksa dulu apakah elemen dengan
id="hanyaContoh"ada di halaman tersebut, jika ada jalankan perintah mengganti warna huruf. Bila tak ada, jangan lakukan apa pun. -
Salah menulis sintaks pada saat inisialisasi
Apakah Anda bisa mencari kesalahan pada kode JavaScript di bawah?
<h1 id="hanyaContoh">Judul Artikel</h1> <script> const namaVariabel = document.getElementById('#hanyaContoh'); namaVariabel.style.color = 'red'; </script>Ya, betul, variabel diinisialisasi menggunakan metode
getElementByIdtetapi sintaksnya salah. Seharusnya('hanyaContoh')tetapi dalam kode di bawah menggunakan#menjadi(#hanyaContoh).Solusi:
Perbaiki sintaks menjadi:
<h1 id="hanyaContoh">Judul Artikel</h1> <script> const namaVariabel = document.getElementById('hanyaContoh'); namaVariabel.style.color = 'red'; </script>
Gimana, error code “Cannot read property on null”-nya sudah bisa diperbaiki? Semoga artikel ini cukup membantu. Atau malah muncul eror yang lain? Tapi jika itu terjadi, Anda tahu, kan, harus menuju kemana? Yak, betul! Stackoverflow. 😂 (eL)
Langit Amaravati
Web developer, graphic designer, techno blogger.
Aktivis ngoding barbar yang punya love-hate relationship dengan JavaScript. Hobi mendengarkan lagu dangdut koplo dan lagu campursari. Jika tidak sedang ngoding dan melayout buku, biasanya Langit melukis, belajar bahasa pemrograman baru, atau meracau di Twitter.
