JavaScript

Помогите с js плз. с forEach

Нужно чтобы при клике на блок, для всех блоков "elem" массива применился стиль .style.background = 'white';
а уже после бы для блока на который кликнули применялось elem.style.background = 'green';
вторая часть работает, а вот как заставить поменять цвет всем блокам массива..
dp.forEach((elem, i) => {
elem.onclick = () => {
//тут все elem должны стать style.background = 'white';
elem.style.background = 'green';
};
});
заранее очень благодарен.
Совершенно необязательно каждый раз перекрашивать все элементы. Достаточно запоминать ранее нажатый элемент в переменную, а потом по нажатию возвращать его цвет к белому, и раскрашивая новый. Выглядеть будет примерно так:

var lastClicked;
dp.forEach(elem => {
__elem.onclick = () => {
____if (lastClicked) {
______// если ранее элемент был нажат, то перекрашиваем его в белый
______lastClicked.style.background = 'white';
____}
____// перекрашиваем текущий элемент в зелёный
____elem.style.background = 'green';
____// запоменаем текущий элемент
____lastClicked = elem;
__}
})

А вообще, более распространённой практикой является добавление модификатора к классу, а применение стилей уже в таблице стилей. Но это детали, сам подход остаётся прежним.

Но если прям совсем уж условие требует постоянного перекрашивания всех элементов по каждому чиху, то просто заменяем условие if () в предыдущем примере на дополнительный цикл:

dp.forEach(elem => { elem.style.background = 'white' });

И удаляем всё, что связано с переменной lastClicked.
Но я, если бы увидел такой код у нас, лично бы подошёл и подзатыльник такому работнику отвесил.

С учётом комментария от Ярослава. Не создаём кучу функций, используем одну по ссылке.

var lastClicked;
function handleClick () {
__if (lastClicked) {
____// если ранее элемент был нажат, то перекрашиваем его в белый
____lastClicked.style.background = 'white';
__}
__// перекрашиваем текущий элемент в зелёный
__this.style.background = 'green';
__// запоменаем текущий элемент
__lastClicked = this;
}
dp.forEach(elem => {elem.onclick = handleClick;})

P.S. Пишу с планшета, поэтому код может не работать при копипасте. Возможно, придётся немножко почитать ошибки в консоли и поправить их.
✝Б
✝️🇦🇲Эдгар Барсегян🇦🇲✝️
1 415
Лучший ответ
Сергей Ануфриев Не лучше, чем у автора: при каждом клике создается N новых функций, где N - число элементов в массиве.
О
М
Г

document.body.addEventListener('click', ({ target }) => {
 if (target === block)
  dp.forEach(el => el.style.backgroundColor = 'white');
 else
  dp.includes(target) && target.style.backgroundColor = 'green';
});
Так чтоль?