Отлично! Мы создали счётчик лайков, значение которого увеличивается при каждом клике. Но ведь число лайков не должно только расти.

Если пользователь ещё не ставил лайк, то клик на «сердечко» лайк добавит, и значение счётчика должно увеличиться. А если лайк уже есть, то клик по кнопке его отменит, и значение счётчика должно уменьшиться. Как нам различать эти клики? Мы можем проверить, есть ли у элемента heart класс added. Если класса у элемента ещё нет, то лайк добавляется, а если класс уже есть, то лайк снимается.

Чтобы проверить, есть ли у элемента класс, используем метод classList.contains:

элемент.classList.contains('класс');

В скобках указывается класс, наличие которого нужно проверить. Когда метод сообщает какую-то информацию, говорят, что он возвращает значение. Метод classList.contains вернёт true (истина), если класс у элемента есть, и false (ложь), если класса нет.

Значения true и false называют булевыми. Таких значений всего два.

Нам нужно проверять, есть ли у элемента heart класс added. Посмотрим, как работает метод classList.contains: скажем JavaScript выводить в консоль значения, которые этот метод возвращает, и кликнем несколько раз на «сердечко», чтобы переключить класс.