Как активировать следующий элемент по кнопке?

Question

[tgarl]

У нас есть список.

<ul>
<li>1</li>
<li class="active">1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>

вопрос как по клику отдельной кнопки переключить активность на следующий по порядку элемент, если все закончились перейти к первому и так по кругу?

Answer 1

[Rsa97]

document.querySelector('button').addEventListener(
  'click',
  () => {
    const next = document.querySelector('li.active + li') ?? document.querySelector('ul li:first-child');
    document.querySelector('li.active')?.classList.remove('active');
    next.classList.add('active');
  },
);