I've made a page slider which works to an extent. There are 3 div elements in the array. When advancing from the div at index 0 to the div at index 1, it works as it should. When advancing from the div at index 1 to index 2, I get an error: Uncaught TypeError: Cannot read properties of undefined (reading 'className') at HTMLAnchorElement.nextPage (eclipsesMain.js:17)

This is my code:

const pages = document.querySelector('.page-container').children;
const next = document.querySelector('.next');
const prev = document.querySelector('.prev');
let totalPages = pages.length;
let index = 0;

const nextPage = function () {
  if (pages[index] == totalPages) {
    index = 0;
  } else {
    index++;
  }
  console.log(pages);
  let selected = document.getElementsByClassName('active');
  selected[0].className = selected[0].className.replace('active', '');
  pages[index].className += 'active';
  console.log(pages[index]);
};

next.addEventListener('click', nextPage);