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

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

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;
    }
  }
}
2 симпатии

Ожидал немного пояснений увидеть. Так и не понимаю, а какая ошибка у меня? (То что можно было чуть-чуть проще сделать - увидел). Почему мой код не проходит проверку? Ведь все работает как должно, или нет? :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;
}
};
}

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

eraser.onchange = function () {
if(eraser.checked){status = 0}
else{status = 1}
}

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

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

for (pixel of pixels) {
pixel.onclick = function () {
pixel.classList.add(‘clicked’);
if (eraser.checked) {
pixel.style.backgroundcolor = ‘white’;
} else {
pixel.style.backgroundcolor = chosenColor.value;
}
}
};

Что не так? Код не срабатывает

внутри цикла for перед переменной pixel нужно поставить let

Ало, а что с проверкой? :smiley:
У меня пишет, что результат везде одинаковый, но при этом, не правильно :slight_smile:
Чекайте:

 let pixels = document.querySelectorAll('.pixel');
 let list = 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 = list.value;
    }else {
      pixel.style.backgroundColor = 'white';
    }
  }
}

По моему, это самый чистый код из всех (да да, с самооценкой у меня все не в порядке)

let pixels = document.querySelectorAll(’.pixel’);
let chosenColor = 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 = chosenColor.value;
}
}
}

вот и всё решение

> const pixel = document.querySelectorAll('.pixel');
> const chosenColor = document.querySelector('.chosen-color');
> const eraser = document.querySelector('#eraser-mode');
> 
> pixel.forEach((item) => {
>   item.addEventListener('click', (evt) => {
>     const target = evt.target; 
>     target.style.backgroundColor = chosenColor.value;
>     
>     if (eraser.checked) {
>       target.style.backgroundColor = 'white'
>     }
>   })
> })

Попробовал обойтись без циклов, с одним обработчиком событий на родительском элементе всех пикселей. Через делегирование. Тоже работает.

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

pixels.onclick = function (evt) {
if (eraser.checked) {
evt.target.style.backgroundColor = ‘white’;
} else {
evt.target.style.backgroundColor = chosenColor.value;
}
}

Лучше вот так, через (.checked)

let pixels = document.querySelectorAll(’.pixel’);
let chosenColor = 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 = chosenColor.value;
}
}
}

let pixels = document.querySelectorAll(’.pixel’);
let chosenColor = 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 = chosenColor.value;
}
}
}

Создаем переменные
затем создаем цикл
внутри цикла делаем обработчик клика и ставим условия ( в обработчике)
незабываем “Верблюжий”

1 симпатия

Здраствуйте, я использовал свое решение:
let pixels = document.querySelectorAll(".pixel");

//console.log(pixels);

let colorSelect = document.querySelector(".chosen-color");

//console.log(colorSelect);

let eraser = document.querySelector(".eraser");

//console.log(eraser);

colorSelect.onchange = ()=>{
for (let pixel of pixels){
pixel.onclick = ()=>{
pixel.style.backgroundColor = colorSelect.value;
if(eraser.checked){
pixel.style.backgroundColor = ‘#fff’;
} else{
pixel.style.backgroundColor = colorSelect.value;
}
}
}
}
но оно не прошло испытание, а ваше да!! Есть ли возможность интегрировать это и это решение тоже как верное? здесь я использовал onchange и стрелочные функции Данный подход, на мой взгляд целесообразнее! Спасибо за ваш челлендж. В испытании виртуальная клавиатура мой подход сработал.
Спасибо за увлекательные тренажёры, курсы и проф-навыки!!!

Объясните плиз как работает цикл for. Почему он не окрашивает все пиксели?

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

for (let pixel of pixels) {
  pixel.addEventListener('click', () => {
    if (!eraser.checked) {
      pixel.style.backgroundColor = chosenColor.value;
    } else {
      pixel.style.backgroundColor = 'white';
    }
  });
}