Kesalahan Mengikuti Tautan di JavaScript

Mari kita bahas kesalahan yang terkait dengan mengikuti tautan secara tidak terduga. Sebagai contoh, diberikan tautan berikut:

<a href="">link</a>

Dapatkan tautan kita ke dalam variabel:

let link = document.querySelector('a');

Pasang penangan klik ke tautan kita:

link.addEventListener('click', function() {
	console.log(this.textContent);
});

Dan di sinilah kita menemukan kejutan. Kodenya ditulis dengan benar, namun, output di konsol tidak muncul. Masalahnya adalah ketika diklik, terjadi perpindahan mengikuti tautan. Karena tidak ada yang ditentukan dalam atribut href, maka tautan hanya mengarah ke halaman saat ini.

Ini berarti klik pada tautan menyebabkan halaman dimuat ulang. Artinya data kita ditampilkan di konsol, kemudian halaman dimuat ulang, dan konsol menjadi kosong.

Jika diperhatikan dengan seksama, dapat dilihat bahwa pada saat klik data muncul di konsol sekejap, lalu menghilang. Inilah ciri khas dari kesalahan ini.

Mari kita lihat bagaimana masalah ini dapat diselesaikan.

Solusi pertama

Dalam href tautan perlu diletakkan tanda pagar. Ini akan menyebabkan tautan menunjuk ke lokasi tertentu pada halaman saat ini dan ketika diklik pada tautan tidak akan ada muat ulang. Mari lakukan ini:

<a href="#">link</a>

Solusi kedua

Cara yang lebih maju adalah membatalkan tindakan bawaan dengan menggunakan metode preventDefault:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});