Кориснички атрибути у 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">

У овом уносном пољу у атрибуту data-length налази се број знакова које је потребно укуцати. Направите тако да при губитку фокуса, ако се број укуцаних знакова не поклапа са задатим, буде исписана порука о томе.

Дат је уносни поље (input):

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

У овом уносном пољу атрибути data-min и data-max садрже опсег. Направите тако да при губитку фокуса, ако број укуцаних знакова не упада у овај опсег, буде исписана порука о томе.