The index appears multiple times when navigating through the prev/next pagination

How can I prevent the repetition of index values when switching between previous and next buttons while displaying 15 posts each time?

For example, currently when clicking on the next button and reaching an index value of 5, then clicking on prev shows the index at value 5 again before decrementing. How do I avoid this behavior?

var array = [0,1,2,3, ...,50]
    var index = 0
    var button = document.querySelectorAll("button").addEventListener("click",paginate)   

   paginate(e) {
            var target = e.currentTarget.dataset.button,
                postsPerPage = 15,
                posts = array.length,
                total = Math.ceil(posts / postsPerPage),
                index = target === 'next' ? index++ : --index,
                //... 
        }

Answer №1

The issue I suspected turned out to be related to the use of index++ and --index. I made changes by replacing them with index= index+1 and index = index -1 respectively, which resolved the problem. I am curious as to why the index was repeating itself, so any insights on this would be greatly appreciated.

 paginate(e) {
            var target = e.currentTarget.dataset.button,
                postsPerPage = 15,
                posts = array.length,
                total = Math.ceil(posts / postsPerPage),
                index = target === 'next' ? index=index +1:index=index-1,
                //...

        } 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why isn't offsetTop working for a div within a table in HTML and Javascript?

When using the offsetTop property to get the absolute position of an object, it works fine when the objects are outside of tables. However, if the object is inside a table, it always returns 1. Why does this happen and how can it be avoided? To see an exa ...

I seem to be having trouble getting the home page to display properly in the app, even though I believe my code is correct. I would greatly appreciate any help in identifying the mistake

I have been struggling to render the HomePage using react Router for the past two days. I would greatly appreciate any support you can provide. Despite my numerous attempts, I have been unable to solve this problem. I even tried tools like chatgpt but al ...

Display cautionary message upon the deletion of a row from a gridview in asp.net

I have implemented a gridview on my web form that includes a command field for delete and edit functionalities. My goal is to display a javascript alert message when a user clicks on the delete button: Are you sure you want to delete this record? If t ...

"Narrow down the object's properties based on an array of specified property

So here's the situation: I have an object that looks like this var obj = { name1: somevalue1, name2: somevalue2, name3: somevalue3} Followed by an array var arr = [name2, name3] Both of these are dynamically generated. What I need to do is filte ...

React Native - The size of the placeholder dictates the height of a multiline input box

Issue: I am facing a problem with my text input. The placeholder can hold a maximum of 2000 characters, but when the user starts typing, the height of the text input does not automatically shrink back down. It seems like the height of the multiline text ...

How to use JavaScript to Hide the Chrome Print Preview Dialogue Box

Is there a way to close the print preview dialogue box opened by the window.print() method using JavaScript? I'm thinking about using Custom Events to dispatch the "esc key", but I'm not sure where to dispatch it on the element. https://i.sstat ...

How can I center a Bootstrap modal vertically and make it responsive?

Is there a way to vertically center the bootstrap modal? I have been searching for a solution, but none seem to be responsive or effective. My website is using Bootstrap 3. The modal does not adjust properly on smaller screens or when the browser window i ...

Instructions for selecting all checkboxes in an HTML table with just one click

Developing an aspx page with 3 HTML tables, I am dynamically adding checkboxes to each cell. Additionally, I have a checkbox outside each table. When I check this checkbox, I want all checkboxes in the corresponding HTML table to be checked. However, curre ...

Getting the width of an element using a React ref is a helpful technique that allows you

I am struggling to retrieve the width of a select field using React Ref. https://i.sstatic.net/JJmqF.png this.selectRef.current is returning an object, but I can't seem to find a way to access the width of the element. <Select ful ...

At what precise moment does the ng-checked function get executed?

When utilizing AngularMaterial, I have implemented ng-checked in the following manner: <md-list> <md-list-item ng-repeat="option in options"> <p> {{ option }} </p> <md-checkbox class="md-secondary" aria-label=" ...

Error message: The property '__isVuelidateAsyncVm' cannot be read because it is undefined

I'm encountering an issue with the code I have in this codesandbox link. The code features a form with validation and a disabled "Calculate" button that should only become enabled when all fields are valid. However, I'm receiving the error messag ...

The AJAX request is failing to reach the server

I'm currently using AJAX to populate a dropdown, but for some reason the call isn't reaching the server. Upon checking Firebug, I see the following error: POST 0 status 404 not found This is the code I'm working with: function selec ...

Display an array in Angular HTML by calling a function

I am currently working on an app that involves displaying cars retrieved from a database. Each car has a string of tags separated by commas, and I have created a function to split these tags into individual words and display them as tags. However, I am str ...

What is the best way to reference an ImageButton using jquery?

I created an HTML page with a special div in the body that contains a collection of buttons and images. <div id="div_one"> <button id="button_one"> <asp:Image id="image_button_one" ImageUrl=".." runat="server"> </button> </div& ...

The scrollTop functionality is not functioning as expected in AngularJS when using the $timeout directive

In my angularJS project, I'm working on implementing a small chat feature. To ensure that the messages are always visible to users, I need the message display div to automatically scroll down when the page loads. For this purpose, I have created a cus ...

Use Node's express.static method to read and serve files from a specified

I am currently working on a Video Portal Project that involves organizing videos into different folders on the server. Utilizing nodejs technology, my goal is to create a function that can access and display all video content within a specific folder. A ...

Is it possible to validate multiple fields within a Vue component by integrating other components and utilizing Vee-Validate for a comprehensive validation process?

Currently, I am utilizing Vue.js version 2.5.13 along with Vee-Validate version 2.0.3. Here is the structure of my code: ./component-one.vue: <template> <div> <input type="text" name="input_one" id="input_one" v-model="in ...

How to access JavaScript files from "bower_components" instead of "node_modules" using webpack

With the utilization of main-bower-files in my Gulp compilation tasks, it is not feasible for me to use webpack to require modules from the node_modules directory as it would interfere with the processing of CSS, images, and fonts in my current asset sys ...

Setting up Royal Slider for use within Magento

Lately, I've been grappling with integrating this slider into Magento with no luck so far. You can find the documentation for it here: To tackle this issue, I decided to include the following code in head.phtml: <script type="text/javascript"> ...

Issues with the directory for Chrome

Currently, I am utilizing jQuery and running an HTML file on my local machine without a server. Interestingly, the code works perfectly fine on Firefox but encounters issues on Chrome: $('#result').load('test.html'); It appears that t ...