Нужно чтобы при клике на блок, для всех блоков "elem" массива применился стиль .style.background = 'white';
а уже после бы для блока на который кликнули применялось elem.style.background = 'green';
вторая часть работает, а вот как заставить поменять цвет всем блокам массива..
dp.forEach((elem, i) => {
elem.onclick = () => {
//тут все elem должны стать style.background = 'white';
elem.style.background = 'green';
};
});
заранее очень благодарен.
JavaScript
Помогите с js плз. с forEach
Совершенно необязательно каждый раз перекрашивать все элементы. Достаточно запоминать ранее нажатый элемент в переменную, а потом по нажатию возвращать его цвет к белому, и раскрашивая новый. Выглядеть будет примерно так:
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. Пишу с планшета, поэтому код может не работать при копипасте. Возможно, придётся немножко почитать ошибки в консоли и поправить их.
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. Пишу с планшета, поэтому код может не работать при копипасте. Возможно, придётся немножко почитать ошибки в консоли и поправить их.
Сергей Ануфриев
Не лучше, чем у автора: при каждом клике создается 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';
});
Так чтоль?
М
Г
document.body.addEventListener('click', ({ target }) => {
if (target === block)
dp.forEach(el => el.style.backgroundColor = 'white');
else
dp.includes(target) && target.style.backgroundColor = 'green';
});
Так чтоль?
Похожие вопросы
- Зачем в JS "foreach" назвали "for of", не так как везде ?
- Помогите определиться с выбором нового языка (JS(TS) vs Java)
- Js фреймворки, что полезного можно для себя найти?
- В чем цель фреймворков js web?
- Помогите, пожалуйста, написать js код для обновления ссылки
- [HTML/CSS/JS] Как сохранять изменённые в .js данные оффлайн-сервера локально?
- Ребят помогите с кодом пожалуйста (JS, Googl Apps Sсript)
- Почему jQuery методы популярнее js методов при общении с ДоМ?
- ПОЧЕМУ JS ТАКОЙ НЕПОНЯТНЫЙ???
- вопрос по JS. " простой ()";