javascriptarraysnavigationbreadcrumbs

Arrow buttons (Prev and Next) with breadcrumbs


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;

Solution

  • 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>