# Styles alternation with the data- attribute in JavaScript

To solve the problem described in the previous lesson, we will not assign classes to the element, but will change the value of the `data-` attribute. This will be convenient because such an attribute can have only one value, and when writing a new value, it will itself overwrite the old one.

For example, this is how we set a successful style:

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

And style for an error:

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

We will set the styles of our states through attribute selectors:

`[data-type="success"] { color: green; } [data-type="warning"] { color: orange; } [data-type="error"] { color: red; }`

Now we can easily color our element in the successful color:

`elem.dataset.type = 'success';`

And now we paint in the color of an error:

`elem.dataset.type = 'error';`

An input is given. When focus is lost, check the number entered into it. If this number is up to ten, then color the input green, if from ten to twenty - yellow, and if more than twenty - red.

← →
↑
en ru