Кориснички атрибути во JavaScript

Во HTML е дозволено да се додаваат сопствени, кориснички атрибути на таговите. Таквите атрибути мора да започнуваат со data-, а потоа може да дојде кое било име на атрибутот кое ви е погодно.

Корисничките атрибути може да се користат на голем број различни начини. Многу од овие начини ќе ги научиме подоцна во учебникот, а уште повеќе ќе можете понатаму да ги откриете сами.

Пристапувањето до ваквите атрибути е организирано на нестандарден начин. Не може едноставно да се пристапи до својството на елементот со истото име, како што правевме претходно, туку треба да се користи специјалното својство dataset, после кое преку точка се пишува името на атрибутот без data-. На пример, ако нашиот атрибут се вика data-test, тогаш за пристап до него ќе пишуваме elem.dataset.test, каде elem е променливата со нашиот елемент.

Ајде да погледнеме на пример. Нека имаме даден ваков елемент:

<div id="elem" data-num="1000"></div>

Ќе го испечатиме на екранот вредноста на неговиот атрибут data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // ќе испечати 1000

А сега ќе му доделиме на овој атрибут друга вредност:

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

Даден е следниот код:

<div id="elem" data-text="str">text</div>

Направете така што при клик на div-от на крајот од неговиот текст да се додаде содржината на неговиот атрибут data-text.

Дадени се div-ови, кои содржат во атрибутот data-num својот редословен број:

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

Направете така што при клик на кој било од div-овите на неговиот крај да му се запише неговиот редословен број.

Дадено е копче. Направете така што ова копче да брои кликови на него, запишувајќи ги во некој кориснички атрибут. Нека при клик на друго копче на екранот се испечати колку кликови биле направени на првото копче.

Даден е input:

<input id="elem" data-length="5">

Во овој input во атрибутот data-length се содржи бројот на знаци кои треба да се внесат во input-от. Направете така што при губење на фокусот, ако бројот на внесени знаци не се совпаѓа со зададениот, да се испечати порака за тоа.

Даден е input:

<input id="elem" data-min="5" data-max="10">

Во овој input атрибутите data-min и data-max содржат опсег. Направете така што при губење на фокусот, ако бројот на внесени знаци не спаѓа во овој опсег, да се испечати порака за тоа.