Почему не срабатывает метод add для NextSibling?

Question

[ForSureN1]

Добрый день, имеется форма регистрации, с табами(их я сделал), и кнопкой "Далее", так вот, по клику на кнопку далее, мне нужно чтобы переключались данные окна, по клику я удаляю у выбранного окна active, и хотел с помощью nextSibling Добавить следующему элементы active, но что то пошло не так, заранее благодарю.

let buttonNavs = document.querySelectorAll('.registration__button-next')
let tabPanes = document.querySelectorAll('.registration__window-elements');
	for (let i = 0; i < buttonNavs.length; i++) {
		buttonNavs[i].addEventListener('click', () => {
			tabPanes[i].classList.remove('active');
			tabPanes[i].nextSibling.classList.add('active')
		})
	}

Ошибка в консоли: Uncaught TypeError: Cannot read properties of undefined (reading '0')
at HTMLAnchorElement. , на строчку с NextSibling

Answer 1

[Rsa97]

nextSibling оперирует не элементами (тэгами), а узлами. Если между элементами есть какой-либо текст (пробел, перевод строки, и т.п.), то этот текст образует отдельный узел #text.
Вам нужно свойство nextElementSibling, которое работает только с элементами, пропуская остальные узлы.

Comments

[ForSureN1]

А, благодарю вас, просто в памяти был данное свойство, полез в гугл, по запросу: как получить следующий элемент в JS - сразу же наткнулся на nextSibling.
Спасибо !