Испытание: Пиксель арт

Здравствуйте. Застрял на этом испытании. Это мой код. Подскажите что не правильно. Все условия кажется выполняются, а проверку не прохожу. Спасибо

let pixels = document.querySelectorAll('.pixel');
let chosenColor = document.querySelector('.chosen-color');
let eraser = document.querySelector('.eraser');


for (let pixel of pixels) {
pixel.onclick = function () {
  pixel.classList.add('clicked');
  if (pixel.classList.contains('clicked') && eraser.checked) {
    pixel.style.backgroundColor = 'white';
    }  else  {
      pixel.style.backgroundColor = chosenColor.value;
      }
  
  }
}
1 Симпатия
let pixels = document.querySelectorAll('.pixel');
let eraser = document.querySelector('.eraser');
let chosencolor = document.querySelector('.chosen-color');

for(let pixel of pixels) {
  pixel.onclick = function() {
    if(eraser.checked) {
      pixel.style.backgroundColor='white';
    }
    else {
      pixel.style.backgroundColor=chosencolor.value;
    }
  }
}
1 Симпатия

Ожидал немного пояснений увидеть. Так и не понимаю, а какая ошибка у меня? (То что можно было чуть-чуть проще сделать - увидел). Почему мой код не проходит проверку? Ведь все работает как должно, или нет? :thinking:
Спасибо

возможно, у разработчиков есть эталонные оптимальные решения, с которыми они сравнивают наш код. У меня была такая же проблема с испытанием, где новые важные и обычные задачи добавляли в список дел. Все работало, но проверку не проходило. На форуме подсмотрела чужие решения - поменяла местами некоторые строки и задание прошло

Привет, насколько я понимаю, в академии заблокирована возможность редактирования index.html в этом и некоторых других заданиях. А ты в коде пишешь создать класс пикселю, да это и лишнее телодвижение конечно. Вот он и не может создать физически его в html.

Доброго времени суток!
Мой код:
let pixel = document.querySelectorAll(’.pixel’);
let chosenColor = document.querySelector(’.chosen-color’);
let eraser = document.querySelector(’.eraser’);

for (let pix of pixel) {
pix.onclick = function () {
eraser.onchange = function () {
if (eraser.checked) {
pix.style.backgroundColor = ‘white’;
}
else {
pix.style.backgroundColor = chosenColor.value;
}
}
}

В обучении сказано при использовании чекбокс используем ф-ию onchange, соответсвенно я использовал данную ф-ию для решения задачи.
В нашем случае с этой функцией ничего не работает…
Пока на форум не зашел так решения и не нашел…
Может, конечно, я как-то не так понял конспект, но вопросы остались…

Добрый день. Кто может подсказать, почему у меня не работает второй вариант и pixels[i] в консоли присваивается значение undefined ?

let pixels = document.querySelectorAll(’.pixel’);
let chosenColor = document.querySelector(’.chosen-color’);
let eraser = document.querySelector(’.eraser’);

for (let pixel of pixels) {
pixel.onclick = function() {
pixel.style.backgroundColor = chosenColor.value;
if (eraser.checked) {
pixel.style.backgroundColor = ‘white’;
}
}
};

/*
var pixels = document.querySelectorAll(’.pixel’);
var chosenColor = document.querySelector(’.chosen-color’);
var eraser = document.querySelector(’.eraser’);

for (var i = 0; i < pixels.length; i++) {
pixels[i].addEventListener(‘click’, function() {
pixels[i].style.backgroundColor = chosenColor.value;
if (eraser.checked) {
pixel.style.backgroundColor = ‘white’;
}
});
}
*/

let pixels = document.querySelectorAll(’.pixel’);
let colorSetting = document.querySelector(’.chosen-color’);
let eraser = document.querySelector(’.eraser’);

for (let pixel of pixels) {
pixel.onclick = function(){
if (eraser.checked){
pixel.style.backgroundColor = ‘white’;
}
else {
pixel.style.backgroundColor = colorSetting.value;
}
};
}