Fejl ved linkovergang i JavaScript

Lad os analysere en fejl relateret til en uventet linkovergang. Lad os som eksempel have følgende link:

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

Lad os få vores link i en variabel:

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

Lad os knytte en klik-håndtering til vores link:

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

Og her venter der en overraskelse. Koden er skrevet korrekt, men output vises ikke i konsollen. Årsagen er, at der sker en overgang via linket ved et klik. Da der ikke er angivet noget i attributten href, så leder linket simpelthen til den aktuelle side.

Det betyder, at et klik på linket fører til en genindlæsning af siden. Det vil sige, at vores data bliver vist i konsollen, derefter genindlæses siden, og konsollen bliver tom.

Hvis man ser nøje efter, så kan man se, hvordan data i øjeblikket af klikket bliver vist i konsollen i et øjeblik, for derefter at forsvinde. Dette er det karakteristiske kendetegn ved denne fejl.

Lad os se på, hvordan man kan løse dette problem.

Første løsning

I href for linket skal man sætte en havelåge (#). Dette vil føre til, at linket peger på et bestemt sted på den aktuelle side, og ved klik på linket vil der ikke ske nogen genindlæsning. Lad os gøre dette:

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

Anden løsning

En mere avanceret metode er at annullere standardhandlingen ved hjælp af metoden preventDefault:

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