Arrow buttons (Prev and Next) with breadcrumbs

Question

I'm trying to build arrow buttons to navigate to Next and Prev pages with a breadcrumb path to show the user which page they are on. I can't seem to get it right. The problems that I'm encountering is that the arrow buttons are not working rigth. The next button will only go to page 2 and not 3 or 4. The prev button don't work at all and the breadcrumbs won't display the pages you went to.

I tried this and it seem to work, but my arrow will disappear with this code:

const previousButton = document.querySelector(".arrow-button.previous");
const nextButton = document.querySelector(".arrow-button.next");
const breadcrumbs = document.querySelector(".breadcrumbs");

// Initial state (assuming you start on the first page)
let currentPage = 1;
const maxPages = 5; // Adjust this based on your actual number of pages

// Update breadcrumbs based on current page
function updateBreadcrumbs() {
breadcrumbs.innerHTML = ""; // Clear existing breadcrumbs

for (let i = 1; i <= currentPage; i++) {
const listItem = document.createElement("li");
const link = document.createElement("a");
link.textContent = `Page ${i}`; // Customize link text if needed
link.href = `#page-${i}`; // Set appropriate links for your pages

if (i === currentPage) {
  listItem.classList.add("active"); // Mark current page as active
  link.removeAttribute("href"); // Remove link for current page
}

listItem.appendChild(link);
breadcrumbs.appendChild(listItem);

 }
}

// Handle previous button click
previousButton.addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
updateBreadcrumbs();
// Handle page content transition here (e.g., using AJAX or DOM manipulation)
console.log(`Switched to page ${currentPage}`); // For demonstration purposes
}

// Disable previous button if on the first page
previousButton.disable = currentPage === 1;
});

// Handle next button click
nextButton.addEventListener("click", () => {
if (currentPage < maxPages) {
currentPage++;
updateBreadcrumbs();
// Handle page content transition here
console.log(`Switched to page ${currentPage}`);
 }

// Disable next button if on the last page
nextButton.disabled = currentPage === maxPages;
});

// Update breadcrumbs initially
updateBreadcrumbs();

I've also tried this:

const previousButton = document.querySelector(".left-arrow");
const nextButton = document.querySelector(".right-arrow");
const breadcrumbs = document.querySelector(".breadcrumbsDisplay");

 // Initial state (assuming you start on the first page)
let currentPage = 1;
const maxPages = 4; // Adjust this based on your actual number of pages
const pages = [
{ text: 'Home |', href: './index1.html' },
{ text: 'About |', href: './index2.html' },
{ text: 'Portfolio |', href: './index3.html' },
{ text: 'Contact |', href: './index4.html' },
]
// Handle previous button click
previousButton.addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
updateBreadcrumbs();
window.location.href = pages[currentPage-1].href;
}
 previousButton.disabled = currentPage === 1;
});

// Handle next button click
nextButton.addEventListener("click", () => {
if (currentPage < maxPages) {
currentPage++;
updateBreadcrumbs();
window.location.href = pages[currentPage-1].href;
}
nextButton.disabled = currentPage === maxPages;
});
// Update breadcrumbs based on current page
function updateBreadcrumbs() {
breadcrumbs.innerHTML = ""; // Clear existing breadcrumbs

for (let i = 1; i <= maxPages; i++) { // Change this line
const listItem = document.createElement("li");
const link = document.createElement("a");
listItem.classList.add("breadcrumb-item");
link.textContent = pages[i-1].text;
link.href = pages[i-1].href;

if (i === currentPage) {
  listItem.classList.add("active"); // Mark current page as active
  link.removeAttribute("href"); // Remove link for current page
}

listItem.appendChild(link);
breadcrumbs.appendChild(listItem);
 }
}

// Initial setup
updateBreadcrumbs();
previousButton.disabled = currentPage === 1;
nextButton.disabled = currentPage === maxPages;

Answer 1

Your first example is almost right. Just need to check the disabled state of the button when clicking next or previous, so I added that code to the updateBreadcrumbs function.

const previousButton = document.querySelector(".arrow-button.previous");
const nextButton = document.querySelector(".arrow-button.next");
const breadcrumbs = document.querySelector(".breadcrumbs");

// Initial state (assuming you start on the first page)
let currentPage = 1;
const maxPages = 5; // Adjust this based on your actual number of pages

// Update breadcrumbs based on current page
function updateBreadcrumbs() {
  breadcrumbs.innerHTML = ""; // Clear existing breadcrumbs

  for (let i = 1; i <= currentPage; i++) {
    const listItem = document.createElement("li");
    const link = document.createElement("a");
    link.textContent = `Page ${i}`; // Customize link text if needed
    link.href = `#page-${i}`; // Set appropriate links for your pages

    if (i === currentPage) {
      listItem.classList.add("active"); // Mark current page as active
      link.removeAttribute("href"); // Remove link for current page
    }

    listItem.appendChild(link);
    breadcrumbs.appendChild(listItem);

  }

  previousButton.disabled = currentPage === 1;
  nextButton.disabled = currentPage === maxPages;
}

// Handle previous button click
previousButton.addEventListener("click", () => {
  if (currentPage > 1) {
    currentPage--;
    updateBreadcrumbs();
    // Handle page content transition here (e.g., using AJAX or DOM manipulation)
    // console.log(`Switched to page ${currentPage}`); // For demonstration purposes
  }
});

// Handle next button click
nextButton.addEventListener("click", () => {
  if (currentPage < maxPages) {
    currentPage++;
    updateBreadcrumbs();
    // Handle page content transition here
    // console.log(`Switched to page ${currentPage}`);
  }
});

// Update breadcrumbs initially
updateBreadcrumbs();

.active {
  background: yellow;
}

button[disabled] {
  background: grey;
}

<div class="breadcrumbs"></div>
<button class="arrow-button previous">previous</button>
<button class="arrow-button next">next</button>