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

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

form.onchange = function () {
  for (let review of reviews) {
    if (review.dataset.evaluation !== 'good') {
      error.classList.add('show');
      submit.disabled = true;
    } else {
      error.classList.remove('show');
      submit.disabled = false;
    }
  }
}
/*
1. У всех радиокнопок есть класс review.
2. Чтобы отслеживать переключение радиокнопок, нужно добавить обработчик событий onchange каждой радиокнопке.
3. У каждой радиокнопки есть атрибут data-evaluation. Если отзыв хороший, значение этого атрибута – 'good', а если плохой - 'bad'.
4. Кнопка отправки имеет класс submit-button. Если пользователь выбрал плохой отзыв, кнопку нужно заблокировать, а если хороший — разблокировать.
5. Чтобы показать сигнал об ошибке, элементу с классом error нужно добавить класс shown. Сигнал нужно показывать, если пользователь выбрал плохой отзыв. Если выбран хороший отзыв, сигнал об ошибке нужно спрятать.
*/

В итоге когда нажимаю на радиокнопки,не происходит ничего.

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

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

Сравните коды и проведите самоанализ

Я сам не понимаю, почему проверка выдает ошибку на вариант ответа “Всё ужасно!”. Когда проверяю сам, все работает безотказно…

1 лайк

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

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

2 лайка
let review = document.querySelectorAll('.review');
let button = document.querySelector('.submit-button');
let error = document.querySelector('.error');
for(let rev of review){
rev.onchange = function () {
  if( rev.dataset.evaluation === 'bad'){
      button.disabled=true;
      error.classList.add('shown');
    } else{
      button.disabled=false;
      error.classList.remove('shown');
      };
  };
};

Сначала пытался добавить onchange к review, но чуть позже понял, что нужно поменять цикл и обработчик местами

11 лайков

let reviews = document.querySelectorAll(’.review’);
let errorSignal = 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;
errorSignal.classList.add(‘shown’);
} else if (review.dataset.evaluation === ‘good’) {
submitButton.disabled = false;
errorSignal.classList.remove(‘shown’);
}
}
};

У меня вот такой код получился, все сработало. onchange не нужен

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


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

У меня такой же код, но он не блочит кнопку и не появляется ошибка(

я решил вообще с evt.target сделать, не нравится мне цикл for of)))
let error = document.querySelector(’.error’);
let buttonSubmit = document.querySelector(’.submit-button’);

let reviewForm = document.querySelector(’.review-form’);

reviewForm.addEventListener(‘click’, function (evt) {

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

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

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

Сделал так, хотя мне понравилась штука с неравенствами, можно написать как угодно
можно review.dataset.evaluation === ‘good’; или review.dataset.evaluation !== ‘good’; или review.dataset.evaluation === ‘bad’; и потом менять значения как хочешь. т.е. заблокировать кнопку отзыв, если она не равна гуд, или равна бад.

2 лайка

ааааа!!! :scream: :scream: :scream: я потратил не это 2 дня!((
Это вообще нормально, что этих технологий в этом курсе не проходили?
например: в обучающем задании где использовался , просто получаешь данные любого пункта списка, которое произошло во всем списке, а в этом задании я как-то должен находить его мэр-знает как, через циклы?
И у меня вопрос: почему, то что не работает с onchange работает с oncklick?
При проверке выдаёт ошибку, после моей проверки я тоже понимаю что это верно, после замены на oncklick всё ровно`

let choices = document.querySelectorAll('.review');
let form = document.querySelector('.review-form')
let submitButton = document.querySelector('.submit-button');
let  errorMessage = document.querySelector('.error')

form.onchange = function(){
for(let choice of choices){      
choice.onclick = function () { 
if(choice.dataset.evaluation !== 'good'){
errorMessage.classList.add('shown')
submitButton.disabled = true;
 }  else{
 errorMessage.classList.remove('shown')
submitButton.disabled = false;
      }  
    }   
  }
};

В курсе всё дотошно разжёвано, задания слишком лёгкие и ведут за ручку, в испытании нужно подумать своей головой, иначе какой толк от обучения, если при малейшем расхождении от шаблона паника.
У Вас в коде лишний обработчик
form.onchange = function()
Ничего с формой делать не нужно, достаточно обработать :

choice.onclick = function ()

или

choice.onchange= function ()

в цикле, в данном случае работает идентично

Поскольку в разметке нет ни одного пункта checked, то при первом клике это не считается обработчиком onchange как изменение, отсюда и ошибка в тесте

3 лайка

два варианта получилось

//1

let checkbox = document.querySelectorAll(’.review’)
let submit = document.querySelector(’.submit-button’)
let error = document.querySelector(’.error’)

for (let check of checkbox) {
check.onchange = function(){
if (check.dataset.evaluation === ‘bad’) {
submit.disabled = true
error.classList.add(‘shown’)
}
else {
submit.disabled = false
error.classList.remove(‘shown’)
}
}
}

//2
let checkbox = document.querySelectorAll(’.review’)
let submit = document.querySelector(’.submit-button’)
let error = document.querySelector(’.error’)

for (let check of checkbox) {
check.onchange = function(){
if (check.value == ‘Всё ужасно!’ || check.value == ‘Так себе’ || check.value === ‘Сойдёт’) {
submit.disabled = true
error.classList.add(‘shown’)
}
else {
submit.disabled = false
error.classList.remove(‘shown’)
}
}
}

2 лайка

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

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

Что не так с кодом???
не работает на отрицательные отзывы

reviews.onchange = function () { написать после for

Рабочий вариант

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

for (let review of reviews) {
  review.onchange = function () {
    if (review.dataset.evaluation === 'good') {
      submit.disabled = false;
      error.classList.remove('shown');
    } else {
      submit.disabled = true;
      error.classList.add('shown');
    }
  }
}
2 лайка

for (review of reviews) {

for (let review of reviews)

Подскажите пожалуйста,что не так с кодом?Выдает только три пройденных теста из 6

let radios=document.querySelector(’.form’);
let reviews=document.querySelector(’.review’);
let error=document.querySelector(’.error’);
let submit=document.querySelector(’.submit-button’);
for (let review of reviews)
review.onclick=function(){
if (review.dataset.evalution===‘good’){
submit.disabled=false;
error.classList.add(‘shown’);
} else{
submit.disabled=true;
error.classList.remove(‘shown’);
}
}

Tasya,

let radios=document.querySelector(’.form’);
Вы эту переменную потом не используете. Зачем она Вам? Можно убрать

Как вы ставите кавычки? Почему-то с вашими выдавал синтаксическую ошибку. Пришлось поменять.
Перед и после “=” должны быть пробелы (хотя, это может и не влияет)

let reviews=document.querySelector(’.review’);
Здесь нужен метод querySelectorAll

for (let review of reviews)
Нужна { после круглой скобки и добавьте закрывающую в конце

if (review.dataset.evalution===‘good’){
Evalu a tion

classList.remove и classList.add поменяйте местами

После этих правок Ваш код заработал

1 лайк
let radios = document.querySelectorAll('.review');
let error = document.querySelector('.error');
let button = document.querySelector('.submit-button');

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