Динамические темы [17/17] Испытание 100%

Отличное испытание, спасибо разработчикам! Вопросы: У меня не получилось сделать обработчик для divов через oninput и onchange(вроде логично, все-таки div не форма). В курсе было запланировано сделать через addEventListener(‘click’ …) или я где-то ошибся? Второй вопрос: Ниже после решения есть другое решение,которое не подходит(3я проверка), но в ручную работает, объясните пожалуйста почему.
Вот код для тех у кого возникли проблемы:

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

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

// Решение, которое работает, но не проходит:

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

Мне кажется, так легче

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

Второе решение не работает

Кавычки измени

изменил, не помогло

Может не все изменил, ну и переменные.

Согласен, я подсказку потом прочитал, уже решил не переписывать

там была подсказка?)

Подскажите, пожалуйста, в чем ошибка в решении? Тоже сделала другим способом. В минибрайзере все корректно работает, но при проверке на 2м и 4м пункте не засчитывает. Есть догадка, что проблема с сохранением цвета в функции, но почему тогда в минибраузере все норм работает?

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

chooseColor.onchange = function () {
  color = chooseColor.value;
  }


for (let pixel of pixels) {
  pixel.onclick = function () {
    if (del.checked) {
  
  pixel.style.backgroundColor = 'white';
  
  } else {
  
  pixel.style.backgroundColor = color;

}}};

Почему то у меня заработало только кода This начал использовать…
let pixels = document.querySelectorAll(’.pixel’);
let chosenColor = document.querySelector(’.chosen-color’);
let eraser = document.querySelector(’.eraser’);

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

Не стоит делать лишний обработчик
let pixels = document.querySelectorAll(’.pixel’);
let chooseColor = document.querySelector(’.chosen-color’);
let del = document.querySelector(’.eraser’);

for (let pixel of pixels) {
  pixel.onclick = function () {
if (del.checked) {
  
  pixel.style.backgroundColor = 'white';
  
  } else {
  
  pixel.style.backgroundColor = chooseColor.value;

}}};

Забыли let в цикле

    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 eraser = document.querySelector(’.eraser’);
let penColor = document.querySelector(’.chosen-color’);

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

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

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

}

Вариант с замыканием

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

let addClickHandler = function(pixel) {
  pixel.onclick = function() {
    if (eraser.checked) {
      pixel.style.backgroundColor = 'white';
    } else {
      pixel.style.backgroundColor = chosenColor.value;
    }
  }
}

for (let pixel of pixels) {
  addClickHandler(pixel);
}
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;
}
}
}

Не проходит проверку, хотя если проверять самому, то все нормально.

Проходит на 100%, если убрать { после 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() {
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’);

chosenColor.onchange = function(){

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