Грешка преласка по линку у JavaScript-у

Хајде да разјаснимо грешку која се односи на неочекивани прелазак по линку. Нека за пример буде дат следећи линк:

<a href="">линк</a>

Добијмо наш линк у променљиву:

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

Доделимо нашем линку руковаоца клика:

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

И ту нас чека изненађење. Код је написан тачно, међутим, испис у конзоли се не појављује. Ствар је у томе да при клику долази до преласка по линку. Како у атрибуту href ништа није наведено, линк једноставно води на тренутну страницу.

То значи да клик на линк доводи до поновног учитавања странице. То јест, наши подаци се исписују у конзолу, затим се страница поново учитава, и конзола постаје празна.

Ако се пажљивије погледа, може се видети како се у тренутку клика подаци појављују у конзоли на трен, а затим нестају. То је и карактеристична ознака ове грешке.

Хајде да видимо како се може решити овај проблем.

Прво решење

У href линка треба ставити тарабу (#). То ће довести до тога да линк указује на одређено место тренутне странице и при клику на линк поновно учитавање неће бити. Урадимо то:

<a href="#">линк</a>

Друго решење

Напреднији начин је отказивање подразумеване радње помоћу методе preventDefault:

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