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.

enru