# Custom attributes in JavaScript

HTML allows you to add your own custom attributes to tags. Such attributes should start with `data-` followed by whatever attribute name you like.

Custom attributes can be used in a huge number of different ways. We will explore many of these methods later in the tutorial, and there are many more you can invent yourself later on.

Access to such attributes is not arranged in a standard way. You can't just refer to the element's property of the same name, as we did before, but you should use the special property `dataset`, after which the attribute name is written using a dot without `data-`. For example, if our attribute is called `data-test`, then to refer to it we will write `elem.dataset.test`, where `elem` is a variable with our element.

Let's look at an example. Let's say we have the following element:

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

Let's display the value of its `data-num` attribute:

`let elem = document.querySelector('#elem'); console.log(elem.dataset.num); // shows 1000`

Now let's assign this attribute a different value:

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

Given the following code:

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

Make it so that when you click on the div, the content of its `data-text` attribute is added to the end of its text.

Given divs that contain their ordinal number in the `data-num` attribute:

`<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>`

Make it so that when you click on any of the divs, its ordinal number is written to the end.

Given a button. Make it so that this button counts the number of clicks on it, writing them to some custom attribute. Let on click on another button on the screen displays how many clicks were done on the first button.

Given an input:

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

In this input, the `data-length` attribute contains the number of characters to be entered into the input. Make it so that when focus is lost, if the number of characters entered does not match the specified one, a message is displayed about this.

Given an input:

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

In this input, the attributes `data-min` and `data-max` contain a range. Make it so that when focus is lost, if the number of characters entered does not fall within this range, a message is displayed about this.

←→
↑
en ru