Как поменять бекграунд при клике!?

Question

[Michaly4]

Приветствую

<div class ="box">
<div class ="item red"</div>
<div class ="item yellow"</div>
<div class ="item blue"</div>
</div>

const child = document.querySelectorAll('.item');
for(const item of child){
item.addEventListener('click', () =>{
if(item.className == 'red'){
document.body.style.backgraundColor = 'red';
}
});
}

Нужно чтобы я мог при клике на определённый item соответственно менялся фон страницы на тот же цвет что і div.Не могу понять что я делаю не так(
Поможете?

Comments

[Ярослав Иванов]

Не нужно, оставь.

[Michaly4]

Ярослав Иванов, почему?)

[WbICHA]

Michaly4, потому что у боди нет параметра backgraundColor.

[Michaly4]

WbICHA, ой пропустил style

[Steppp]

в for наверно надо let!
и вообще я бы сделал

child.foreach(el => {
  el.addEventListener('click', () =>{


  }
})

Или делегирование!

box.addEventListener('click', (evt) =>{
    evt.target
// и по какому классу был клик
}

[Евгений]

Steppp, я бы на родителя повесил)

[Michaly4]

Steppp, с let тоже не работает (

[Steppp]

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

<> <> <>

ЗАКРОЙ ДИВЫ !!!

[WbICHA]

в for наверно надо let!

Steppp, знаешь, хорошим тоном, если не уверен, считается проверять свои слова. Тем более которые можно проверить за 10 секунд в консоли браузера.
В for..of как раз const и является самым верным решением.
А вообще да, форыч ещё лучше.

Michaly4, естественно не работает.
Во-первых, по какой причине ты добавляешь один эвент всем айтемам, когда по факту ты используешь только .айтем.ред?
Во-вторых, консоль-логни item.className.

[Michaly4]

WbICHA, наверное потому что я только начал учиться и наверное не всё ещё понимаю правильно ( и как лучше

[Michaly4]

WbICHA, спасибо ты показал куда смотреть и теперь всё у меня работает!!!)

[WbICHA]

Michaly4, как вариант:

const colors = {
  otherColor: '#123456',
};

const items = document.getElementsByClassName('item');

items.forEach((item) => {
  const colorClass = item.classList[1];
  const color = colors[colorClass] || colorClass;
  
  item.addEventListener('click', () => {
    document.body.style.backgraundColor = color;
  });
});

colors я добавил, чтобы ты мог добавить любой цвет, а не только те, что словесно перечисленны. То есть в хекс, ргб или хсв формате, при этом класс будет называться по другому.
И да, запомни, массивы ВСЕГДА должны называться во множественном числе. Или хотя бы иметь в названии Array / List или нечто подобное, что подразумевает набор данных.

Answer 1

[Steppp]

Смотри какие у тебя ошибки!
<div class ="item red"</div>
class= пишется без пробелов
red"</div> - надо закрывать скобки red"></div>

document.body.style.backgraundColor = 'red';
backgraundColor пишется через O background

Держи студент! Скопировал я твоих код, не понимал почему не работает! Будь внимательней!!!

Comments

[Steppp]

Да, и еще if(el.matches('.red')){ этим самым ты ищешь определенный класс!
В этом условии if(item.className == 'red'){ он находил у тебя все классы item red тем самым никогда условие не выполнилось! Если конечно не удалить класс item

[Michaly4]

Спасибо буду разбираться!!) За matches еще не знал

[Steppp]

Michaly4, И не забудь отметить "Вопрос решен" )

[WbICHA]

Michaly4, чтобы не допускать ошибок с опечатками, поставь spellchecker, спасёт от множества глупейших опечаток, которые фиг заметишь.

Answer 2

[Максим]

В общем вот так получилось через event.target + slice(4) - который отрезает сам item

Только не пойму почему курсор мигает внутри квадратиков



Если удобнее то вот на стрелочной функции: https://codepen.io/topicstarter/pen/eYdbxOB

Comments

[WbICHA]

let doc = document.querySelector("body");

Серьёзно?

let trg = event.target.className.slice(4);

Серьёзно???

[Максим]

WbICHA, не я пошутил .... но без slice не работает

[Максим]

WbICHA, а вообще это

серьёзно

мне вообще ни о чём не говорит..

Вместо того что бы выделываться передо мной - просто напишите ответ с вашим решением этого вопроса и поясните что Ленский туфту прогнал и обязательно аргументируйте ...

Если работает то что не так ?

[WbICHA]

Если работает то что не так ?

То, что это захардкоженная фигня? Тем более, когда есть нативные решения?

Мой же ответ уже давным давно в комментариях вопроса лежит.

[Максим]

WbICHA, в коммах не может быть ответа - объясни в чём хардкор

[WbICHA]

Много Чего, и что же мешает ответу быть в комментариях?

объясни в чём хардкор

Эээээ... "Хардкор"? Что? К чему ты его упомянул?

[Максим]

WbICHA, аргументы напишите или так и будете спамить игрой слов ?

[WbICHA]

Много Чего, если вы сами не понимаете, что первое делать глупо, а второе ─ чистейший говнокод, то тут мои полномочия всё.

[Максим]

WbICHA, короче давайте ...

[Максим]

WbICHA, я переделал, пришлось попросить помощи, я понял свою ошибку.....извеняюсь за спорную дисскусию

[WbICHA]

Много Чего, всё норм, я сюда потоксичить немного захожу, так что не обращай внимания.
Хотя в твоём случае ты не исправил самое главное. Посмотри моё решение в комментариях вопроса, а именно реализацию получения второго класса. В крайнем случае аналог того решения был бы сплит, но зачем, когда есть нативное свойство?

[Максим]

WbICHA, я вот так сделал -

document.querySelectorAll(".item").forEach((el) => {
  el.addEventListener("click", (event) => {
    document.body.style.backgroundColor = getComputedStyle(
      event.target
    ).backgroundColor;
  });
});

просил помощи здесь: https://ru.stackoverflow.com/q/1232451/308951

[WbICHA]

Много Чего, дорогое и неоправданное по производительности решение. В данном конкретном случае в этом нет смысла. Я про getComputedStyle.

[Максим]

WbICHA, аа....а как узнать ...что потребляет меньше ресурсов ?