Добавление активного класса одному элементу из массива, с последующим сохранением активного класса на элементе

Не могу понять как реализовать добавление активного класса одному элементу, с последующим сохранением активного класса на этом элементе, при клике на кнопку.

Пример: При клике активный класс дается одному элементу списка. При следующем клике активный класс у элемента сохраняется и дается следующему элементу. введите сюда описание изображения

const progress = document.querySelectorAll('.pagination-item-round');

function changeStage(stages) {
  stages.forEach((stage) => {
    stage.classList.add('_active');
  });
}
.pagination {
  list-style: none;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.pagination li span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 10px;
  width: 50px;
  background: #262626;
  -webkit-box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.33);
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.33);
}

.pagination li span._active {
  background: #708FFF;
  -webkit-box-shadow: 0px 0px 11px #708FFF;
  box-shadow: 0px 0px 11px #708FFF;
  -webkit-filter: blur(2px);
  filter: blur(2px);
}
<div class="paginations">
  <ul class="pagination">
    <li class="pagination-item">
      <span class="pagination-item-round"></span>     
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>     
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>     
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>     
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>     
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>     
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>     
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>     
    </li>    
  </ul>
</div>

<button class="btn" onclick="changeStage(progress)">Клик</button>


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

Автор решения: Air

const progress = document.querySelectorAll('.pagination-item-round');
const btn = document.querySelector('.btn');
let index = 0;

btn.addEventListener('click', () => progress[index++].classList.add('_active'))
.pagination {
  list-style: none;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.pagination li span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 10px;
  width: 50px;
  background: #262626;
  -webkit-box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.33);
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.33);
}

.pagination li span._active {
  background: #708FFF;
  -webkit-box-shadow: 0px 0px 11px #708FFF;
  box-shadow: 0px 0px 11px #708FFF;
  -webkit-filter: blur(2px);
  filter: blur(2px);
}
<div class="paginations">
  <ul class="pagination">
    <li class="pagination-item">
      <span class="pagination-item-round"></span>
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>
    </li>
    <li class="pagination-item">
      <span class="pagination-item-round"></span>
    </li>
  </ul>
</div>

<button class="btn">Клик</button>

→ Ссылка