0
262
Vistas¿Por qué mi botón para ir a la página siguiente de la API no funciona correctamente?
Así que tengo una API en la página HTML y el botón "siguiente" para obtener la siguiente página de la API: 
Código Javascript para el botón:
next.addEventListener('click', ()=>{ if(nextPage <= totalPages){ pageCall(nextPage); } })Código para la función pageCall:
function pageCall(page){ let url = new URL(lastUrl) url.searchParams.set("page", page) fetchURL(url); window.scrollTo(0, 0); }Código para la función fetchUrl:
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'); } }) }Entonces, cuando hago clic en el botón siguiente, la URL de la API cambia a página = "siguiente página" al final, pero de repente la siguiente URL es página = "Siguiente", aunque no sé de dónde viene esto. URL de la API en la consola cuando hago clic en el botón:
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=NextObtengo estas dos URL cuando hago clic en el botón, por lo que cuando hago clic en él, siempre muestra la primera página de la API. No tengo idea de por qué, porque, como puede ver, la página es 2 en la primera URL, pero de repente cambia a "siguiente".
1 Respuestas
Responde la pregunta0
Resolví el problema. Tenía un detector de eventos para todos los elementos, incluidos los botones y los números, por lo que cuando hace clic en un número, llama a una página API con valor numérico con texto interno, así que supongo que es por eso que pasó "Siguiente" como texto interno también.
Así que es mi código html de 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>Como hay números y botones, y lo seleccioné en un código javascript como este:
const ulTag = document.querySelectorAll('ul');Y es mi función para hacer clic en eventos en números:
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); }));Como puede ver, usa la función en todos los elementos ul, por lo que esa es la razón por la que la página en la API era igual a "Siguiente", porque era el texto interno del botón. Así que lo corregí con:
const ulTag = document.querySelectorAll('.numb');Al seleccionar solo elementos li con números, resolvió el problema.