根据条件重置计数器变量

Question

I have this simple "pagination" counter which is fetching the next page from an API. It works fine but the problem is that whenever I change category (movies or series) the counter obviously doesn't reset so instead of fetching the first page of the new category it continues from the number it left off.

I tried numerous conditional combinations but nothing really worked so far. I'm sure it's not that hard to solve I just can't think of the right logic to use.

let page = 1; 
document.getElementById('load-more').addEventListener('click', () => {
    page++;

    const movies = document.getElementById('movies');
    const series = document.getElementById('series');


    if(movies.classList.contains('active-link')) {

        getMovies(page);


    } else if (series.classList.contains('active-link')) {

        getSeries(page);

    }
})

Reseting the let counter inside the if..else doesn't really work because every time I click the load more button it resets it back to page 1.

Answer 1

Use separate variables for the current movies page and the current series page. Also note that you can simplify your logic by using a single querySelector instead of selections followed by classList.contains :

let moviesPage = 1;
let seriesPage = 1;
document.getElementById('load-more').addEventListener('click', () => {
  if (document.querySelector('#movies.active-link')) {
    moviesPage++;
    getMovies(moviesPage);
  } else if (document.querySelector('#series.active-link')) {
    seriesPage++;
    getSeries(seriesPage);
  }
});

Answer 2

Set another event listener for the click on your #movies and #series link,

and set the page variable to 1 at this place.

That would be the usual behavior when switching lists, one usually see a reset of paging.