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

[troll]

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’);
pixel.style.background = chosenColor.value;
if (eraser.checked) {
pixel.style.background = ‘white’;
} else {
pixel.style.background = chosenColor.value;
}
}
}

Что не так с кодом, работают все элементы, программа выдаёт ошибку: Всего проверок: 4, пройдено: 0 (String)

[Eleven]

Добрый день!

Класс clicked в решении излишний. Проверка может не проходить из-за него.

[troll]

Спасибо большое!

[Kampfer969]

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

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

Вроде всё работает, но почему пишет что не пройден

[Ruslan116]

Вместо background нужно написать backgroundColor. Так прописано в CSS файле, поэтому не проходится проверка…

[Kampfer969]

Спасибо!

[Kazan175]

подскажите пожалуйста будет ли считаться ошибкой если написать без ветки else?
проверку проходит и без else.

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’;}
/* } else {
pixel.style.backgroundColor = chosenColor.value;
}*/
}
};

[REDFOX39]

P.S. Проблема была в коде )

У меня проблема со вторым испытанием подряд :
для того, чтобы скрипты инициализировались - необходим первичный дабблклик( проблема вылезает как в минибраузере, так и при проверках ), а дальше всё идёт как по маслу.
Здесь проблема либо в коде, либо-же на стороне сервера.

Но код, вроде-бы, работает идеально. ⇓⇓⇓

let pixels = document.querySelectorAll(’.pixel’);
let chosenColor = document.querySelector(’.chosen-color’);
let eraser = document.querySelector(’.eraser’);
let canvas = document.querySelector(’.canvas’);
var arrElem = [];

canvas.onclick = function () {
for (var i = 0; i < pixels.length; i++){
arrElem.push(pixels[i]);
pixels[i].addEventListener(‘click’, function(e){
let arrIndex = arrElem.indexOf(e.target);
if (eraser.checked !== false) {
pixels[arrIndex].style.backgroundColor = ‘#ffffff’;
} else {
pixels[arrIndex].style.backgroundColor = chosenColor.value;
}
});
}
}

Что с этим делать, и как дальше жить ?

С уважением, <!DOCTYPE Liky>.

[El_Hombre]

[El_Hombre]

Последний коммент в коде - моя пометка (для себя), забыл удалить перед скрином.

[El_Hombre]

Из интереса решил добавить.

[realcheg]

Решиль поделится своими начальными успехами в JS=) Let’s go!
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’;
};
};
};

[JuliaAvona]

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

[hellocoder]

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

for (let element of pixels) {
 element.onclick = function () {
  if(eraser.checked) { 
    element.style.backgroundColor = 'white';
    } else {
    element.style.backgroundColor = colors.value;
  };
 }; 
};