How do I create previous/next button in JavaScript? (Tried it but something doesn't work)-CodePudding

So here's my HTML part:

   class Customer {
        constructor(picture, name, position, review){
            this._picture = picture;
            this._name = name;
            this._position = position;
            this._review = review;
        }
    
        get picture() {
            return this._picture;
        }
    
        get name() {
            return this._name;
        }
    
        get position() {
            return this._position;
        }
    
        get review() {
            return this._review;
        }
    }
    
    const customerBarbara = new Customer('barbara.jpg', 'Barbara', 'Assistant Manager', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, porro facilis quos doloribus molestias eaque!');
    const customerPerry = new Customer('perry.jpg', 'Perry', 'Programmer', 'Repellendus non ratione id eveniet quisquam omnis itaque explicabo nihil, inventore rerum nisi, atque ex sequi!');
    const customerClarence = new Customer('clarence.jpg', 'Clarence', 'Web Master', 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur fuga laboriosam officia facilis voluptas? Repellendus non ratione id eveniet quisquam omnis itaque explicabo nihil, inventore rerum nisi, atque ex sequi!');
    const customerSara = new Customer('sara.jpg', 'Sara', 'Physician', 'Enim beatae provident voluptates accusantium expedita, maxime minima fugiat consectetur fuga. Tempora id error eos quae iusto saepe. Eius expedita et animi veniam minus officiis. Ea eligendi maxime corporis in tempore, dolore culpa accusamus repellat ullam? Harum.');
    const customerTom = new Customer('tom.jpg', 'Tom', 'Cleaner', 'Tempora id error eos quae iusto saepe. Eius expedita et animi veniam minus officiis. Ea eligendi maxime corporis in tempore, dolore culpa accusamus repellat ullam? Harum.')
    
    const arrayOfCustomers = [customerBarbara, customerClarence, customerPerry, customerSara, customerTom];
    
    let customersName, customersPic, customersPosition, customersReview;
    let i = 0;
    
    
    const randomReview = () => {
        const randomCustomer = Math.floor(Math.random() * arrayOfCustomers.length);
        customersName = arrayOfCustomers[randomCustomer].name;
        customersPic = arrayOfCustomers[randomCustomer].picture;
        customersPosition = arrayOfCustomers[randomCustomer].position;
        customersReview = arrayOfCustomers[randomCustomer].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    const nextReview = () => {
        if(i === arrayOfCustomers.length){
            i = 0;
        } else {
            i  ;
        }
    
        customersName = arrayOfCustomers[i].name;
        customersPic = arrayOfCustomers[i].picture;
        customersPosition = arrayOfCustomers[i].position;
        customersReview = arrayOfCustomers[i].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    const previousReview = () => {
        if(i === 0){
            i = arrayOfCustomers.length - 1;
        } else {
            i--;
        }
    
        customersName = arrayOfCustomers[i].name;
        customersPic = arrayOfCustomers[i].picture;
        customersPosition = arrayOfCustomers[i].position;
        customersReview = arrayOfCustomers[i].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    clientName.innerHTML = arrayOfCustomers[i].name;
    clientPosition.innerHTML = arrayOfCustomers[i].position;
    clientReview.innerHTML = arrayOfCustomers[i].review;
    
    generateRandomReview.addEventListener('click', randomReview);
    showNextReview.addEventListener('click', nextReview);
    showPreviousReview.addEventListener('click', previousReview);

 <body>
        <main>
            <h2>Our Reviews</h2>
            <section>
                <img id="clientPic" src="" alt="">
                <h6 id="clientName"></h6>
                <p id="clientPosition"></p>
                <article id="clientReview"></article>
                <a href="" id="showPreviousReview"> < </a> <a href="" id="showNextReview"> > </a>
                <button id="generateRandomReview">Surprise Me</button>
            </section>
        </main>
    </body>

So my problem is that the randomReview function works properly, it displays the random things on the site, but the nextReview and previousReview functions doesn't stick. I mean when I click on the arrow tags I see everything appearing for half a second and everything seems to be in the right place but then it disappears and I can't seem to understand why..

Thank you for your time !

CodePudding user response：

You need to prevent the default action of the <a> click, by using e.preventDefault() in the callback:

class Customer {
        constructor(picture, name, position, review){
            this._picture = picture;
            this._name = name;
            this._position = position;
            this._review = review;
        }
    
        get picture() {
            return this._picture;
        }
    
        get name() {
            return this._name;
        }
    
        get position() {
            return this._position;
        }
    
        get review() {
            return this._review;
        }
    }
    
    const customerBarbara = new Customer('barbara.jpg', 'Barbara', 'Assistant Manager', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, porro facilis quos doloribus molestias eaque!');
    const customerPerry = new Customer('perry.jpg', 'Perry', 'Programmer', 'Repellendus non ratione id eveniet quisquam omnis itaque explicabo nihil, inventore rerum nisi, atque ex sequi!');
    const customerClarence = new Customer('clarence.jpg', 'Clarence', 'Web Master', 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur fuga laboriosam officia facilis voluptas? Repellendus non ratione id eveniet quisquam omnis itaque explicabo nihil, inventore rerum nisi, atque ex sequi!');
    const customerSara = new Customer('sara.jpg', 'Sara', 'Physician', 'Enim beatae provident voluptates accusantium expedita, maxime minima fugiat consectetur fuga. Tempora id error eos quae iusto saepe. Eius expedita et animi veniam minus officiis. Ea eligendi maxime corporis in tempore, dolore culpa accusamus repellat ullam? Harum.');
    const customerTom = new Customer('tom.jpg', 'Tom', 'Cleaner', 'Tempora id error eos quae iusto saepe. Eius expedita et animi veniam minus officiis. Ea eligendi maxime corporis in tempore, dolore culpa accusamus repellat ullam? Harum.')
    
    const arrayOfCustomers = [customerBarbara, customerClarence, customerPerry, customerSara, customerTom];
    
    let customersName, customersPic, customersPosition, customersReview;
    let i = 0;
    
    
    const randomReview = () => {
        const randomCustomer = Math.floor(Math.random() * arrayOfCustomers.length);
        customersName = arrayOfCustomers[randomCustomer].name;
        customersPic = arrayOfCustomers[randomCustomer].picture;
        customersPosition = arrayOfCustomers[randomCustomer].position;
        customersReview = arrayOfCustomers[randomCustomer].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    const nextReview = () => {
        e.preventDefault();
        if(i === arrayOfCustomers.length){
            i = 0;
        } else {
            i  ;
        }
    
        customersName = arrayOfCustomers[i].name;
        customersPic = arrayOfCustomers[i].picture;
        customersPosition = arrayOfCustomers[i].position;
        customersReview = arrayOfCustomers[i].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    const previousReview = (e) => {
        e.preventDefault();
        if(i === 0){
            i = arrayOfCustomers.length - 1;
        } else {
            i--;
        }
    
        customersName = arrayOfCustomers[i].name;
        customersPic = arrayOfCustomers[i].picture;
        customersPosition = arrayOfCustomers[i].position;
        customersReview = arrayOfCustomers[i].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    clientName.innerHTML = arrayOfCustomers[i].name;
    clientPosition.innerHTML = arrayOfCustomers[i].position;
    clientReview.innerHTML = arrayOfCustomers[i].review;
    
    generateRandomReview.addEventListener('click', randomReview);
    showNextReview.addEventListener('click', nextReview);
    showPreviousReview.addEventListener('click', previousReview);

<body>
        <main>
            <h2>Our Reviews</h2>
            <section>
                <img id="clientPic" src="" alt="">
                <h6 id="clientName"></h6>
                <p id="clientPosition"></p>
                <article id="clientReview"></article>
                <a href="" id="showPreviousReview"> < </a> <a href="" id="showNextReview"> > </a>
                <button id="generateRandomReview">Surprise Me</button>
            </section>
        </main>
    </body>