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

Vasili_Vushev · 08.Май.2020 19:02:21

Отличное испытание, спасибо разработчикам! Вопросы: У меня не получилось сделать обработчик для 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;
});
}

vchpro · 08.Май.2020 19:03:47

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

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

vchpro · 08.Май.2020 19:05:37

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

Vasili_Vushev · 08.Май.2020 19:06:09

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

vchpro · 08.Май.2020 19:09:28

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

Vasili_Vushev · 08.Май.2020 19:11:29

Vasili_Vushev · 08.Май.2020 19:12:17

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

Vasili_Vushev · 08.Май.2020 19:13:30

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

vchpro · 08.Май.2020 19:15:15

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

LeksK · 11.Май.2020 14:20:05

Подскажите, пожалуйста, в чем ошибка в решении? Тоже сделала другим способом. В минибрайзере все корректно работает, но при проверке на 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;

}}};

JakeShev · 13.Май.2020 16:50:20

Почему то у меня заработало только кода 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;
}
};
};

vchpro · 16.Май.2020 15:37:33

Не стоит делать лишний обработчик
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;

}}};

vchpro · 16.Май.2020 15:42:12

Забыли 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;
    }
    };
    };

JakeShev · 17.Май.2020 16:56:23

точно, спасибо!

masha_b · 17.Май.2020 22:54:44

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

mazheykin · 03.Июнь.2020 13:51:47

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

}

artcherenkov · 11.Июнь.2020 04:23:00

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

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

sinkaas · 20.Июнь.2020 04:42:05

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

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

babalena · 20.Июнь.2020 19:45:13

Проходит на 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;
};
};

gostana · 05.Сентябрь.2020 10:25:44

всем здрасьте
объясните, пожалуйста, почему так нельзя?

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