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

VitaliVakunov · 11.Май.2020 22:43:23

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

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;
      }
  
  }
}

kkorolyova · 12.Май.2020 13:06:31

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;
    }
  }
}

VitaliVakunov · 13.Май.2020 03:06:48

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

Stamielys · 13.Май.2020 16:58:48

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

Marka · 15.Май.2020 08:04:01

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

Pingvin · 10.Июнь.2020 20:00:46

Доброго времени суток!
Мой код:
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, соответсвенно я использовал данную ф-ию для решения задачи.
В нашем случае с этой функцией ничего не работает…
Пока на форум не зашел так решения и не нашел…
Может, конечно, я как-то не так понял конспект, но вопросы остались…

Shwarcz · 11.Июнь.2020 10:07:41

Добрый день. Кто может подсказать, почему у меня не работает второй вариант и 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’;
}
});
}
*/

Georgiana · 30.Июнь.2020 14:20:02

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;
}
};
}

spektorlee · 10.Ноябрь.2020 16:25:36

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’;
}
}
};

mariiamel · 18.Декабрь.2020 06:14:00

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;
}
}
};

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

_maxim · 05.Январь.2021 14:09:56

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

wkila · 12.Январь.2021 21:37:21

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

 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';
    }
  }
}

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

Helmutas · 08.Март.2021 21:06:59

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;
}
}
}

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

Banana_Republic · 04.Июль.2021 15:15:28

> 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'
>     }
>   })
> })

MasterRost · 08.Июль.2021 13:39:50

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

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;
}
}

Maestro1 · 14.Декабрь.2021 13:47:28

Лучше вот так, через (.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;
}
}
}

ZiloK45 · 04.Январь.2022 23:16:36

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;
}
}
}

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

Techno_Fox_Bit · 07.Январь.2022 10:03:07

Здраствуйте, я использовал свое решение:
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 и стрелочные функции Данный подход, на мой взгляд целесообразнее! Спасибо за ваш челлендж. В испытании виртуальная клавиатура мой подход сработал.
Спасибо за увлекательные тренажёры, курсы и проф-навыки!!!

andreevart199 · 01.Февраль.2022 23:46:40

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

Rozzel · 12.Апрель.2022 13:55:46

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';
    }
  });
}