Prev/Next page buttons

JavaScript
1

Hi all,

I am trying to create a ‘Review Carousel’, but I am struggling with creating working buttons through JavaScript - is there an appropriate way to link to an internal file using JavaScript? I would essentially like to call on a function that redirects the user to the next review and also disables non-applicable buttons. This is what I have so far:

SIDENOTE I have two html documents - one is index and the other index2, which is what is referenced in the location.href section of the functions. These are the documents I am trying to link to the buttons. It seems as though location.href is not applicable here - is there another method I should be using?

JS:

const buttonRight = document.getElementById('buttonRight');
const buttonLeft = document.getElementById('buttonLeft');
let currentIndex = 0;

function nextReview() {
   if (currentIndex == 0) { 
   let newPage = location.href = "./ReviewCarousel/index2.html";
   return newPage;
   } else {
    buttonRight.disabled = true;
   }
}

function previousReview() {
    currentIndex = 1;

    if (currentIndex > 0) {
        let prevPage = location.href = "./ReviewCarousel/index.html";
        return prevPage;
    } else {
        buttonLeft.disabled = true;
    }
}```

HTML:
Review Page

Our Reviews:

John Doe

An image of a man

Full-Stack Developer

This website is amazing - really useful learning experience. I hope the creator continues on his developer journey and we see more from him in the future!

Previous Next

Write your review here!

```
2

HTML not linked properly, see below:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Review Page</title>
</head>
<body>
        <div class="heading">
            <h1>Our Reviews:</h1>
            <hr>
        </div>
            <div class="mainBod">
                <h2 class="name">John Doe</h2>
                <img class="image" src="./Images/male-sample-image.jpg" alt="An image of a man">
                <p class="occupation">Full-Stack Developer</p>
                <p class="userComment">This website is amazing - really useful learning experience. I hope the creator continues on his developer journey and we see more from him in the future!</p>
                    <button type="button" id="buttonLeft" onclick="previousReview()">Previous</button>
                    <button type="button" id="buttonRight" onclick="nextReview()">Next</button>
            </div>

</body>
<footer>
<div class="review">
    <p class="userReview"><a id="userReview" href="link to review page here" target="_blank">Write your review here!</a></p>
</div>
</footer>
<link src="script.js">
</html>