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