Как изменить цвет текста при клике?

Question

[sammyKj]

Добрый день
Пробую обратиться к элементу для смены цвета по клику, но цвет у текста так и не изменяется..
Как при нажатии на шаг изменять исходный цвет?
https://codepen.io/SamanthaKJ/pen/vYdZqGK

Comments

[TheAndrey7]

Название метода getElementsByClassName() во множественном числе говорит что вам будет возвращён набор элементов, который естественно надо обойти циклом.

[0xD34F]

document.querySelectorAll('tabs__btn')

document.getElementByClassName('.tabs__btn')

Гениально.

Answer 1

[низкомолекулярный макрос]

я бы поменял последние строки в JS

const tabs_list = document.querySelector('.list');

const tabs_btns = document.querySelectorAll('.tabs__btn')

tabs_list.addEventListener('click', function onClick(event) {
  tabs_btns.forEach(tab => tab.style.color = "black");
  event.target.style.color = 'red';
});

Answer 2

[0xD34F]

.tabs__btn.tabs__btn--active {
  color: red;
}

const buttons = document.querySelectorAll('.tabs__btn');
const items = document.querySelectorAll('.how-we-work__tab-item');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target }) {
  const { path } = target.dataset;
  items.forEach(n => n.classList.toggle('how-we-work__tab-item--active', n.dataset.target === path));
  buttons.forEach(n => n.classList.toggle('tabs__btn--active', n === target));
}

Comments

[sammyKj]

спасибо