15. Испытание: Оцените сайт. Где ошибка?

Разобрался.
submit.disableD =)

/*

  1. У всех радиокнопок есть класс review.
  2. Чтобы отслеживать переключение радиокнопок, нужно добавить обработчик событий onchange каждой радиокнопке.
  3. У каждой радиокнопки есть атрибут data-evaluation. Если отзыв хороший, значение этого атрибута – ‘good’, а если плохой - ‘bad’.
  4. Кнопка отправки имеет класс submit-button. Если пользователь выбрал плохой отзыв, кнопку нужно заблокировать, а если хороший — разблокировать.
  5. Чтобы показать сигнал об ошибке, элементу с классом error нужно добавить класс shown. Сигнал нужно показывать, если пользователь выбрал плохой отзыв. Если выбран хороший отзыв, сигнал об ошибке нужно спрятать.
    */

let buttons = document.querySelectorAll(’.review’);
let submitButton = document.querySelector(’.submit-button’);
let error = document.querySelector(’.error’);

for (let button of buttons) {
button.onchange = function () {
if (button.dataset.evaluation !== ‘good’) {
submitButton.disabled = true;
error.classList.add(‘shown’);
}
else {
submitButton.disabled = false;
error.classList.remove(‘shown’);
}
};
};

let buttons = document.querySelectorAll(’.review’);
let submitbutton = document.querySelector(’.submit-button’);
let error = document.querySelector(’.error’);
for (let button of buttons) {
button.onchange = function(){
if (button.dataset.evaluation === ‘bad’ ) { error.classList.add(‘shown’);
submitbutton.disabled = true;
} else { submitbutton.disabled = false;
error.classList.remove(‘shown’);
}
}
}

Здравствуйте. Когда пишу такое, не проходится текст 4
let review = document.querySelectorAll(’.review’);
let submit = document.querySelector(’.submit-button’);
let error = document.querySelector(’.error’);

for (let everyreview of review) {
everyreview.onchange = function () {
if (everyreview.dataset.evaluation === ‘good’) {
submit.onclick = function ()
{
submit.disabled = false;
error.classList.remove(‘shown’);
}
}
else
{ submit.disabled = true;
error.classList.add(‘shown’); };
};
};
Screenshot_2

но стоит убрать submit.onclick = function () - и все 6 тестов пройдены. Почему из-за submit.onclick = function () проходится 5 тестов, но один - нет?
Спасибо за ответ.

А зачем нужен onclick? Кнопка должна блокироваться при выборе неугодной радиокнопки. Получается, она у Вас должна заблокироваться после нажатия что-ли?)

1 лайк

Спасибо, видимо у меня своя логика :joy: Благодарю :+1:t2::muscle:t2:

Объясните пож-та почему не выводится значение формы, а сообщение, что оно неопределено при переключении радио-кнопок. В 13м задании все ок. Задачу решил. Просто интересно.
let form = document.querySelector(’.review-form’);
form.onchange = function () {
alert(form.value);
};

const reviewInputNodes = document.querySelectorAll('.review');
const buttonSubmit = document.querySelector('.submit-button');
const error = document.querySelector('.error');
const DatasetCheck = {
  BAD: 'bad',
  GOOD: 'good',
};


for (let inputNode of reviewInputNodes) {
  inputNode.addEventListener('change', (evt) => {
    const {dataset} = evt.target;
    
    switch (inputNode.dataset.evaluation) {
      case DatasetCheck.BAD: {
        buttonSubmit.disabled = true;
        error.classList.add('shown');
        break;
      }
        case DatasetCheck.GOOD: {
        buttonSubmit.disabled = false;
        error.classList.remove('shown');
        break;
      }
    }
  })
}

Обратите внимание, на то, что Вы нашли в DOM. Выведите в консоль form и все станет ясно )

А мне вот в голову пришло обойтись без цикла, потренироваться в делегировании, действуя через один обработчик, помещенный родительский класс - форму, в которой лежат инпуты с комментариями. Вроде бы, всё работает.
let reviews = document.querySelector(’.review-form’);
let button = document.querySelector(’.submit-button’);
let error = document.querySelector(’.error’);

reviews.onchange = function (evt) {
if(evt.target.dataset.evaluation === ‘bad’){
button.disabled=true;
error.classList.add(‘shown’);
}
else{
button.disabled=false;
error.classList.remove(‘shown’);
};
};

Подскажите, зачем здесь form?

Привет. Если речь о первой строке, то это класс родительского элемента, на который помещается один обработчик события, который отслеживает событие onchange на всех дочерних элементах.

Можно было не писать в else {review.dataset.evaluation === ‘good’;}
так как else и так означает иначе)

Если не затруднит, можете объяснить - почему надо писать сначала цикл, а после обработчик Onchange?

Представьте себе массиво-подобный объект, который вы получаете посредством document.querySelectorAll, то есть NodeList, в него у вас войдут все элементы с классом .review, нам нужно обрабатывать событие на каждом элементе и вот чтобы не обрабатывать каждый элемент по отдельности мы должны сначала пройтись циклом по объекту, придти в каждый элемент массиво-подобного объекта и добавить ему обработчик, это также можно сделать через:

Object.values(reviews).map((review) => review.addEventListener('change', () => {
      if (review.dataset.evaluation === 'bad') {
        error.classList.add('shown');
        submit.disabled = true;
      } else {
        error.classList.remove('shown');
        submit.disabled = false;
      }
    })); 

Доброго времени суток
Я смог немного криво пройти это задание и было бы интересно услышать поянительную бригаду

let knopka = document.querySelectorAll(’.review’);
let badrewiew = document.querySelector(’.submit-button’);
let baderror = document.querySelector(’.error’);

for (let butt of knopka) {
butt.onchange = function () {
if (butt.dataset.evaluation === ‘bad’) {
badrewiew.disabled = true;
baderror.classList.add(‘shown’);
};
if (butt.dataset.evaluation === ‘good’) {
badrewiew.disabled = false;
baderror.classList.remove(‘shown’);
};
};
};

Это вариат, который прокатил в задании. Как видите, у меня получилось два “if”, хотя, казалось бы, вместо второго можно просто поставить else в пару к первому if и всё должно заработать
Но нет, не работает, вообще весь скрипт перестаёт работать. и я хоть убей не пойму почему. В чем проблема, кто-нибуть видит?

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

for (let review of reviews) {
review.onchange = function (){
if (review.dataset.evaluation !== ‘good’){ submitButton.disabled = true;
error.classList.add(‘shown’);
}
else{
submitButton.disabled = false;
error.classList.remove(‘shown’);
}

  }

}

а когда через else делаешь тоже условие оставляешь: (butt.dataset.evaluation === ‘good’) ???

Нет, естественно
if (условие) {} else {};
Я даже не могу определить, на каком этапе кода у меня этот else вызывает проблемы, потому что после замены второго if на else перестаёт работать и первый if, хотя его я вообще никак не меняю при замене

UPD. А, всё, нашел, понял и устранил проблему (точка с запятой)
Столько головняка на пустом месте себе организовал, ужс :expressionless:

1 лайк

Почему тогда в тренировочном задании (фильтр новостей на сайте) тоже у всех новостей был один класс (коллекция), но мы делали for of после onchange?

1 лайк