"previous" button not pulling up previous page of class that contains pages
Hi, software engineering senior here with a Web Front-End Design assignment in JavaScript.
For my assignment, I am building a custom application that displays restaurants in my local area. The user enters the application and either types in an address or gets the device's current location via navigator.geolocation.getCurrentPosition.
The application then pulls a list of up to 20 results from the Google Places API. If there is more, the user can click "Next." If the user is on the next page, they should be able to click back by clicking the Previous button.
Except, I can't, not on the first try. I have to hit "Previous" twice in order for the button to do what I expect it to do.
I even have a built-in safety check intended to alert me to any problems.
Here's my code:
index.js
window.getPreviousPage = function()
{
currentList().getPreviousPage();
renderRestaurantList(restaurantList,restaurantsDiv);
document.getElementById("nextButton").disabled = false;
if (!currentList().hasPreviousPage())
document.getElementById("prevButton").disabled = true;
}
function renderRestaurantList(restaurantList,parentElement)
{
renderPageSelector();
console.log("Rendering.");
const table = document.createElement("table");
parentElement.innerHTML = "";
parentElement.appendChild(table);
const listToDisplay = restaurantList.getRestaurants(resultsPerPage);
console.log("last element in list: " + listToDisplay[19].place_id);
for (const i in listToDisplay)
{
if (listToDisplay[i].name === undefined)
continue;
const tr = document.createElement("tr");
const td1 = document.createElement("td");
const a = document.createElement("a");
a.href = "details.html";
a.onclick = () => {
const placeId = listToDisplay[i].place_id;
localStorage.setItem("place_id",placeId);
}
const h3 = document.createElement("h3");
h3.innerText = listToDisplay[i].name;
a.appendChild(h3);
td1.appendChild(a);
const td2 = document.createElement("td");
td2.innerText = listToDisplay[i].rating;
const td3 = document.createElement("td");
td3.innerText = listToDisplay[i].distance;
const td4 = document.createElement("td");
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
try
{
checkbox.checked = window.favoritesList.includes(listToDisplay[i]); // refers to an unrelated list.
}
catch (e)
{
console.error(e);
}
checkbox.id = listToDisplay[i].place_id;
checkbox.onchange = window.toggleFavorite;
td4.appendChild(checkbox);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table.appendChild(tr);
}
}
And then each restaurant list is a member of a RestaurantList class with the following methods:
#previousPage()
{
const page = this.#pages[this.#currentPageNumber - 1];
return page;
}
hasPreviousPage()
{
return this.#previousPage() !== undefined;
}
// assert that the next/previous page and the current page are not the same.
#assertPage(page)
{
for (const i in page)
{
if (page[i].place_id === this.#array[i].place_id)
throw new Error("Previous/next page is actually same page!");
}
}
// Get the previous page.
getPreviousPage()
{
if (!this.hasPreviousPage())
throw new Error("undefined page");
this.#assertPage(this.#previousPage);
this.#array = this.#previousPage();
this.#currentPageNumber -= 1;
}
Posted Jul 17, 2021, 2:23 AM UTC