Как поменять стиль по клику на чистом Javascript?

Question

[Имя Фамилия]

Есть такой код:

<div class="one">
<svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;">
<path fill="#909090" d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>
</svg>
</div>

Как на чистом Javascript по клику по классу "one", то есть по самому div заменить fill="#909090" на fill="#000"
и наоборот, если в коде fill="#000", чтобы по клику он заменялся на fill="#909090"
А так же при повторном клике, что бы возвращалось исходное состояние.
Спасибо большое за помощь.

Answer 1

[0xD34F]

.one path {
  fill: #909090;
}
.one.active path {
  fill: #f00;
}

const itemSelector = '.one';
const activeClass = 'active';

document.addEventListener('click', function(e) {
  const el = e.target.closest(itemSelector);
  if (el) {
    el.classList.toggle(activeClass);
  }
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.classList.toggle(activeClass));

Comments

[Имя Фамилия]

Спасибо.

Answer 2

[Vadim Bogomazov]

https://jsfiddle.net/2smqdh35/

Comments

[Имя Фамилия]

Спасибо.