0
257
ViewsWhy my button to go to the next page of API doesn't work properly?
So I have an API on HTML page, and "next" button to get the next page of API:
Javascript code for the button:
next.addEventListener('click', ()=>{
if(nextPage <= totalPages){
pageCall(nextPage);
}
})
Code for pageCall function:
function pageCall(page){
let url = new URL(lastUrl)
url.searchParams.set("page", page)
fetchURL(url);
window.scrollTo(0, 0);
}
Code for fetchUrl function:
function fetchURL(url){
lastUrl = url;
fetch(url)
.then(res => res.json())
.then(data =>{
trendingMovies(data.results);
currentPage = data.page;
nextPage = currentPage + 1;
prevPage = currentPage - 1;
totalPages = data.total_pages;
lastPage = totalPages;
if(currentPage <= 1){
prev.classList.add('disabled');
next.classList.remove('disabled');
}
else if(currentPage >= lastPage){
prev.classList.remove('disabled');
next.classList.add('disabled');
}else{
prev.classList.remove('disabled');
next.classList.remove('disabled');
}
})
}
So when I click on next button, the API url changes to page="nextpage" in the end, but suddenly next URL is page="Next", though i don't know where this next comes from. API URL in console when I click on the button:
https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key={api_key}&page=2
https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&{api_key}&page=Next
I get these two URLs when I click on the button, so when I click on it, it always display the first page of API. I have no idea why, cause, as you can see, the page is 2 in the first URL, but suddenly it turns to "next".
1 answers
Answer question0
I figured out the problem. I had an event listener for all items, including buttons and numbers, so when you click a number, it called an API page with number value with innerText, so i guess that's why it passed "Next" as innerText too.
So it's my html code of ul:
<ul id="pag">
<li class="btn prev" id="prev"><span><i class="fas fa-angle-left">Prev</i></span></li>
<li class="numb active" id="numb1"><span>1</span></li>
<li class="numb"><span>2</span></li>
<li class="numb"><span>3</span></li>
<li class="numb"><span>4</span></li>
<li class="numb" id="numb5"><span>5</span></li>
<li class="dots"><span>...</span></li>
<li class="numb"><span>10</span></li>
<li class="btn next" id="next"><span>Next<i class="fas fa-angle-right"></i></span></li>
</ul>
As you there're numbers and buttons, and I selected it in javascript code like this:
const ulTag = document.querySelectorAll('ul');
And it's my function for click event on numbers:
function pagination(e) {
let elems = document.querySelector('.active');
if (elems !== null) {
elems.classList.remove('active');
e.target.classList.toggle('active');
pageCall(e.target.innerText);
}
let dots = document.getElementsByClassName('dots')[0];
let numb1 = document.getElementById('numb1');
if (parseInt(e.target.innerText) >= 2) {
numb1.insertAdjacentElement('afterend', dots);
}
ulTag.forEach(el => el.addEventListener('click', (e) =>{
pagination(e);
}));
As you see, it uses the function on all ul elements, so that's the reason page in API was equal to "Next", cause it was button's innerText. So I corrected it with:
const ulTag = document.querySelectorAll('.numb');
By selecting only li items with numbers, it solved the problem.