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

Курсы Динамические стили элементов
1

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

Робочий код 100%

2

Моё решение (100%), если есть замечания, буду рада узнать!
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”;
};
};
};

3

я не могу одного понять,в каких случаях мы пишем let в цикле,а в каких нет?
По пример for(element of elements) или for(letelement of elements)
не мог понять почему не работает,а ошибка была в том,что не написал let

4

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

for (let pix of pixel) {
pix.onclick = function() {
if(eraser.checked === true) {
pix.style.backgroundColor = ‘white’
} else {
pix.style.backgroundColor = color.value
}
}
}

5

Я так понял, что let пишем при создании переменной в цикле.

6

let используем для создания новой переменной. В начале кода мы создали переменную element, в которую записали “набор” значений (например, все дни недели). А в цикле создаем новую переменную element, чтобы хранить в ней конкретное значение из набора (например, среда)

let неделя;
...
for ( let день of неделя){...}

В данном случае переменная “день” нужна нам только в пределах цикла для перебора дней недели, поэтому мы ее объявили внутри цикла. Остальные переменные нужны по ходу кода, поэтому они глобальные - объявлены в самом начале и действуют в каждой части кода

7

Спасибо, что объяснил.

8

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

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