Разобрался.
submit.disableD =)
/*
- У всех радиокнопок есть класс review.
- Чтобы отслеживать переключение радиокнопок, нужно добавить обработчик событий onchange каждой радиокнопке.
- У каждой радиокнопки есть атрибут data-evaluation. Если отзыв хороший, значение этого атрибута – ‘good’, а если плохой - ‘bad’.
- Кнопка отправки имеет класс submit-button. Если пользователь выбрал плохой отзыв, кнопку нужно заблокировать, а если хороший — разблокировать.
- Чтобы показать сигнал об ошибке, элементу с классом 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’); };
};
};
но стоит убрать submit.onclick = function () - и все 6 тестов пройдены. Почему из-за submit.onclick = function () проходится 5 тестов, но один - нет?
Спасибо за ответ.
А зачем нужен onclick? Кнопка должна блокироваться при выборе неугодной радиокнопки. Получается, она у Вас должна заблокироваться после нажатия что-ли?)
Спасибо, видимо у меня своя логика Благодарю
Объясните пож-та почему не выводится значение формы, а сообщение, что оно неопределено при переключении радио-кнопок. В 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. А, всё, нашел, понял и устранил проблему (точка с запятой)
Столько головняка на пустом месте себе организовал, ужс
Почему тогда в тренировочном задании (фильтр новостей на сайте) тоже у всех новостей был один класс (коллекция), но мы делали for of после onchange?