Как сделать счетчик со сменой цвета активного элемента по клику?

Question

[Сергей]

https://codepen.io/anon/pen/ZPJNbV

Есть 4 цифры и 2 кнопки. Первая цифра имеет класс active, который задает активный цвет. По клику вправо этот класс должен переключаться на следующую цифру и т.д. Дойдя до 4ой цифры, активный класс должен остаться на ней, пока не начать кликать влево - после чего класс active начнет переключаться назад.

На данный момент работает при клике вправо, но обратно уже бажит...

p.process-block__stage-number.active I
p.process-block__stage-number II
p.process-block__stage-number III
p.process-block__stage-number IV
            
button.process-block__btn.process-block__btn-right
button.process-block__btn.process-block__btn-left

.process-block {
  &__stage-number {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 2.14;
    letter-spacing: 1px;
    position: relative;
    margin-right: 65px;
    
       &.active {
        color: red;
      }
    }
}

const processBlockStageNumber = Array.prototype.slice.call(document.querySelectorAll('.process-block__stage-number'));
  const processLeftBtn = document.querySelector('.process-block__btn-left');
  const processRightBtn = document.querySelector('.process-block__btn-right');

    let  counter = 1;

    processLeftBtn.addEventListener('click', function () {
      processBlockStageNumber.forEach((item, i) => {
        item.classList.remove('active');

        if (i === counter) {
          processBlockStageNumber[i].classList.add('active');
        } else if (counter == processBlockStageNumber.length) {
          counter = processBlockStageNumber.length;
        }
      })

      if (counter < processBlockStageNumber.length -1) {
        counter += 1
      }
      console.log(counter);
    })

    processRightBtn.addEventListener('click', function () {

      processBlockStageNumber.forEach((item, i) => {
        item.classList.remove('active');

        if (i === counter) {
          processBlockStageNumber[i].classList.add('active');
        } else if (counter == 1) {
          counter = 1

        }
      })

      if (counter <= processBlockStageNumber.length - 1 && counter !== 0) {
        counter -= 1
      }
      console.log(counter);
    })

Answer 1

[0xD34F]

p.process-block__stage-number.active I
p.process-block__stage-number II
p.process-block__stage-number III
p.process-block__stage-number IV

button.process-block__btn(data-change=-1)
  span
    b prev
button.process-block__btn(data-change=+1)
  span
    b next

document.addEventListener('click', function(e) {
  const button = e.target.closest('[data-change]');
  if (button) {
    const blocks = [...document.querySelectorAll('.process-block__stage-number')];
    let active = blocks.findIndex(n => n.classList.contains('active'));

    blocks[active].classList.remove('active');
    active = Math.max(0, Math.min(blocks.length - 1, active + +button.dataset.change));
    blocks[active].classList.add('active');
  }
});

https://codepen.io/anon/pen/bZryZQ?editors=1010

Comments

[Сергей]

Вариант рабочий! Спасибо! А можно вариант без e.target - просто у меня в кнопке svg, а в svg - use - и в итоге нужно кликать по маленькой иконке непосредственно. E.target приходит на нее(

[0xD34F]

Можно проверять, не лежит ли target внутри кнопки. Обновил пример.

[Сергей]

Оно! Спасибо большое!