Как изменить с помощью addEventListener css стили?

Question

[kirillleogky]

Есть код - https://jsfiddle.net/ho6ad0nz/

При клике на кружок (именно на кружок) с подписью "red" или "blue" цвет кружочка "Current color" должен меняться на "red" или "blue" соответственно.
Подскажите как быть, так как я не хочу использовать такой вариант:

redColor.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `#ff0000`;
})

blueColor.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `#001eff`;
})

Я хочу использовать именно event.target.style но не цвет в явном виде





Есть ли вариант не использовать такой код:

const currColorInput = document.getElementById('curr-icon-input');
const currColor = document.querySelector('.curr-icon');
const prewColor = document.querySelector('.prev-icon');
const redColor = document.querySelector('.red-icon');
redColor.style.backgroundColor = '#ff0000';
const blueColor = document.querySelector('.blue-icon');
blueColor.style.backgroundColor = '#001eff';

currColorInput.addEventListener('change', (event) => {
  currColor.style.backgroundColor = `${currColorInput.value}`;
})

currColor.addEventListener('click', (event) => {
  prewColor.style.backgroundColor = `${currColorInput.value}`;
  currColorInput.click();
})

redColor.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `${event.target.style.backgroundColor}`;
})

blueColor.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `${event.target.style.backgroundColor}`;
})

Answer 1

[0xD34F]

Элементам, клик на которые должен изменять цвет, добавляете какой-нибудь класс, при клике проверяете наличие этого класса, если есть - меняете цвет:

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('xxx')) {
    currColor.style.backgroundColor = t.nextElementSibling.textContent;
  }

  // или

  if (t.matches('.xxx')) {
    currColor.style.backgroundColor = getComputedStyle(t).backgroundColor;
  }
});

Comments

[kirillleogky]

0xD34F getComputedStyle() лучше мне кажется
спасибо