Почему не работает скрипт добавления класса активности?

Question

[MeMoJlor]

Хочу реализовать переход между страницами при нажатии на ссылки. Использую этот скрипт:

<a class="links" href="" onclick="url=this.href;setTimeout('location.href=url',600);this.href='javascript:void(0)';">о нас</a> 
<a class="links" href="" onclick="url=this.href;setTimeout('location.href=url',600);this.href='javascript:void(0)';">контакты</a>
<div class="next"></div

.next {
  background-color: black;
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 0;
  height: 100vh;
  max-height: 100%;
  transform: translateY(120%);
  transition: 0.7s cubic-bezier(.86,0,.07,.995);
  z-index: 5000;
}
.next2 {
  transform: none;
  opacity: 1;
}

document.querySelector('.links').addEventListener('click', _=> {
document.querySelector('.next').classList.toggle('next2');})

Скрипт работает только с первой ссылкой, при клике на вторую и т.п, уже нет. Как можно это решить?

Comments

[Kovalsky]

Думаю надо убрать со ссылок атрибут onclick

[MeMoJlor]

Kovalsky, Тогда не реализовать переход. Скрипт сам по себе не хочет работать с несколькими триггерами. Спасибо

Answer 1

[Валерия Сергеева]

Вы ищете только первую ссылку с помощью метода querySelector, используйте querySelectorAll('.links'), и с помощью метода forEach переберите псевдомассив, присвоив каждой ссылке событие addEventListener.

Comments

[MeMoJlor]

должен быть такой код?

document.querySelector('.links').forEach(item => item.addEventListener('click', _=> {
      document.querySelector('.next').classList.toggle('next2');}))

[Валерия Сергеева]

MeMoJlor, да, все верно, только в начале querySelectorAll.

[MeMoJlor]

Валерия Сергеева, Блин) Спасибо, очень помогли. Удачи вам.