Кекс решил узнать, что посетители думают о новостном портале «Flashnews». Для этого он создал страницу опроса. Чтобы сэкономить пользователям время, Кекс сам написал все отзывы и добавил их на страницу в виде группы радиокнопок.

Группа радиокнопок позволяет выбрать один вариант из нескольких предложенных. Активной может быть только одна радиокнопка в группе. Если активировать другую радиокнопку, то первая автоматически выключится.

Чтобы оценить новостной портал, пользователи должны выбрать радиокнопку с подходящим отзывом и отправить форму.

Опрос показал, что не все пользователи в восторге от сайта. Кекс огорчился… И решил, что нужно срочно доработать страницу опроса!

План такой: если пользователь выбирает хороший отзыв, то всё должно работать, как прежде. Если же выбран плохой отзыв, то кнопку отправки нужно заблокировать, а пользователю сказать, что произошла ошибка.

Написать скрипт Кекс поручил вам. Вот что следует учесть:

• У всех радиокнопок есть класс review.
• Чтобы отслеживать переключение радиокнопок, нужно добавить обработчик событий onchange каждой радиокнопке.
• У всех радиокнопок есть атрибут data-evaluation. Если отзыв хороший, значение этого атрибута — 'good', а если плохой — 'bad'.
• Кнопка отправки имеет класс submit-button. Если пользователь выбрал плохой отзыв, кнопку нужно заблокировать, а если хороший — разблокировать.
• Чтобы показать сигнал об ошибке, элементу с классом error нужно добавить класс shown. Сигнал нужно показывать, если пользователь выбрал плохой отзыв. Если выбран хороший отзыв, сигнал об ошибке нужно спрятать.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

let reviews = document.querySelectorAll('.review');
let error = document.querySelector('.error');
let button = document.querySelector('.submit-button');

for (let review of reviews) {
  review.onchange = function () {
    if (review.dataset.evaluation === 'bad') {
      button.disabled = true;
      error.classList.add('shown');
    } else {
      button.disabled = false;
      error.classList.remove('shown');
    }
  };
}