Greška prilikom prelaska putem linka u JavaScript-u

Hajde da razmotrimo grešku povezanu sa neočekivanim prelaskom putem linka. Za primer, neka je data sledeća veza:

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

Dobijmo našu vezu u promenljivu:

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

Povežimo našu vezu sa rukovalcem klika:

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

I ovde nas čeka iznenađenje. Kod je napisan ispravno, međutim, ispis u konzoli se ne pojavljuje. Stvar je u tome što prilikom klika dolazi do prelaska putem veze. Kako u atributu href ništa nije navedeno, veza jednostavno vodi na trenutnu stranicu.

To znači da klik na vezu dovodi do ponovnog učitavanja stranice. To jest, naši podaci se ispisuju u konzolu, zatim se stranica ponovo učitava, i konzola postaje prazna.

Ukoliko se pažljivo zagledamo, onda možemo da vidimo kako se u trenutku klika podaci pojavljuju u konzoli na tren, a zatim nestaju. To je karakteristična odlika ove greške.

Pogledajmo kako možemo da rešimo ovaj problem.

Prvo rešenje

U href veze treba staviti rešetku. To će dovesti do toga da veza pokazuje na određeno mesto trenutne stranice i prilikom klika na vezu neće biti ponovnog učitavanja. Uradimo to:

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

Drugo rešenje

Napredniji način je otkazivanje podrazumevane radnje pomoću metode preventDefault:

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