Как получить второй class?

Question

Имеем несколько div с двумя class...

При клике на event.target надо получить только тот class в котором есть color и присвоить его фоном на body

Я это сделал так :

document.querySelectorAll(".item").forEach(function(el) {
  el.addEventListener("click", function(event) {
    result.innerHTML = event.target.className;

    document.body.style.backgroundColor = event.target.className.slice(4)
  });
});

.item {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

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

<div id="result"></div>

Но этот код обозвали хардкором ...

Что такое хардкор в моём случае ?

Каким образом можно присвоить backgroundColor без хардкора ?

Answer 1

Думаю, что вопрос должен был звучать так: Задать цвет для <body> на основе цвета соответствующего <div>-а.

Хардкор, в данном случае, от слова hard (жёсткий), т.е. жёсткая привязка к имени цвета, ограниченная палитра, вероятность несовпадения названия класса и имени цвета.

Ну и ко всему, ещё и привязка к позиции в className - даже если не отрезать с помощью slice(), а разбивать через split(), то всё равно, нужный класс должен всегда стоять вторым в строке. Но, что если класс item добавится скриптом чуть позже? Тогда уже он будет вторым, что для нас не подходит.

document.querySelectorAll(".item").forEach(function(el) {
  el.addEventListener("click", function(event) {
    result.innerHTML = event.target.className;

    document.body.style.backgroundColor = getComputedStyle(event.target).backgroundColor;
  });
});

/* Only for demo */ body { background-color: rgba(255, 255, 255, 1); background-image: url('https://i.stack.imgur.com/m9NKc.png');

}
.item {
  width: 30px; height: 30px;
  border: 1px solid #000;
}
.red    { background: red;    }
.green  { background: green;  }
.blue   { background: blue;   }
.yellow { background: yellow; }
.голубой-полупрозрачный { background: #0ff8; }

<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item yellow"></div>
<!-- Что даёт использование правильного подхода -->
<div class="голубой-полупрозрачный item"></div>

<div id="result"></div>

БЛОГ НА HUSL

Как получить второй class?

Ответы (1 шт):