Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как можно получить второй class ? (https://javascript.ru/forum/dom-window/81716-kak-mozhno-poluchit-vtorojj-class.html)

maxim1978 17.01.2021 08:27

Как можно получить второй class ?
 
Имеем div с двумя class. Выглядит это так

Код:

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

Потребовалось получить при клике второй class я это делал так

Код:

document.querySelectorAll(".item").forEach(function (el) {
  el.addEventListener("click", function (event) {
    document.body.style.event.target.className.slice(4);
  });
});

Этот код обозвали гов.... и хардкором

Как можно получить второй class но другим способом ?

Тут моя попытка : https://codepen.io/topicstarter/pen/vYXvPMg

maxim1978 17.01.2021 08:51

решено

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

рони 17.01.2021 09:01

maxim1978,
а так сможешь вместо forEach
document.body.addEventListener("click", function(event)  {

maxim1978 17.01.2021 09:04

Цитата:

Сообщение от рони (Сообщение 532850)
maxim1978,
а так сможешь вместо forEach
document.body.addEventListener("click", function(event)  {

как это ?

рони 17.01.2021 09:07

maxim1978,
Делегирование событий

maxim1978 17.01.2021 09:09

Цитата:

Сообщение от рони (Сообщение 532852)

у меня разве не это ?

рони 17.01.2021 09:12

maxim1978,
у вас на каждом item клик, а можно сделать обработчик клика только на body.

maxim1978 17.01.2021 09:12

Цитата:

Сообщение от рони (Сообщение 532854)
maxim1978,
у вас на каждом item клик, а можно сделать обработчик клика только на body.

я не понял как - покажите ?

рони 17.01.2021 09:24

maxim1978,
в доке всё написано, и у вас практически готовый код , только добавить 1 строку из примеров по ссылке. ... ну или ждите, может кто быстрее? :)

maxim1978 17.01.2021 09:25

Цитата:

Сообщение от рони (Сообщение 532856)
maxim1978,
в доке всё написано, и у вас практически готовый код , только добавить 1 строку из примеров по ссылке. ... ну или ждите, может кто быстрее? :)

я пол ночи просидел с этой штукой - ладно забейте


Часовой пояс GMT +3, время: 20:51.