Feil ved lenker i JavaScript

La oss se på en feil relatert til uventet navigering ved lenker. La oss for eksempel ha følgende lenke:

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

La oss hente lenken vår i en variabel:

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

La oss knytte en klikk-håndterer til lenken vår:

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

Og her venter det en overraskelse. Koden er skrevet riktig, men utskriften i konsollen vises ikke. Saken er at det skjer en navigering ved klikk på lenken. Siden ingenting er spesifisert i attributtet href, så peker lenken bare til den nåværende siden.

Dette betyr at et klikk på lenken fører til en oppdatering av siden. Det vil si at våre data skrives ut til konsollen, deretter lastes siden på nytt, og konsollen blir tom.

Hvis man ser nøye etter, kan man se hvordan data i øyeblikket av klikket dukker opp i konsollen i et lite øyeblikk, for deretter å forsvinne. Dette er det karakteristiske tegnet på denne feilen.

La oss se på hvordan vi kan løse dette problemet.

Første løsning

I href til lenken må vi sette en firkant (#). Dette vil føre til at lenken peker til et spesifikt sted på den nåværende siden, og ved klikk på lenken vil det ikke skje noen oppdatering. La oss gjøre dette:

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

Andre løsning

En mer avansert måte er å avbryte standardhandlingen ved hjelp av metoden preventDefault:

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