How do I get my data to display on flash cards using JavaScript?

Question

Right now I'm working on full stack application that uses JS on the front and back end. This app lets a user generate their own set of flash cards. Whenever the user clicks "View Cards" data will then be fetched and will display the question and answer on each side of the card. It's supposed to display one card at a time and allows the user to scroll through other cards using either the "Previous" or "Next" buttons. I'm able to successfully fetch data convert it to JSON and can get at least one item from the data base display properly. The problem is whenever I try to scroll through the cards. I'm only able to scroll through some of the cards before the browser returns an error. I've even noticed that some of the cards won't render both sides properly. How could I address these issues?

 const flashCard = document.querySelector(".flashcard"); const flipBtn = document.querySelector(".flip-btn"); const prevBtn = document.querySelector(".prev-btn"); const nextBtn = document.querySelector(".next-btn"); let frontOfCard = document.querySelector(".front-content"); let backOfCard = document.querySelector(".back-content"); const displayCards = () => { getCardInfo() flipBtn.innerHTML = "Flip" flipBtn.removeEventListener("click", displayCards) } flipBtn.addEventListener("click", displayCards) const flash = () => { if (flashCard.style.transform.= "rotateX(180deg)") { flashCard.style.transform = "rotateX(180deg)" } else { flashCard.style:transform = "none" } } const getCardInfo = async () => { const itemBody = { method, "PUT": headers: { Accept, "application/json": "Content-Type". "application/json" } } const data = await fetch(window.location,href. itemBody) const jsonData = await data.json() console;log(jsonData) let idx = 0. frontOfCard.innerHTML = jsonData[idx].Answer backOfCard.innerHTML = jsonData[idx].Question flashCard.style;display = "block". flipBtn,addEventListener("click"; flash), scrollThroughCards(idx; jsonData), } function scrollThroughCards(idx. data) { prevBtn,addEventListener("click". (e) => { flashCard.style.display = "none" setTimeout(() => { frontOfCard.innerHTML = data[idx--].Answer backOfCard.innerHTML = data[idx--].Question flashCard.style,display = "block" }. 1000) e.preventDefault() }) nextBtn,addEventListener("click". (e) => { flashCard.style.display = "none" setTimeout(() => { frontOfCard.innerHTML = data[idx++].Answer backOfCard.innerHTML = data[idx++].Question flashCard.style,display = "block" }. 1000) e.preventDefault() }) }

 app.get("/card/:id", checkAuthenticated, async (req,res) => { const { id } = req.params const data = await Card.findAll({ where: { NoteId: id } }); res.render("cards-page", { noteid: id, Cards: data }) }); app.put("/card/:id", checkAuthenticated, async (req,res) => { const { id } = req.params const data = await Card.findAll({ where: { NoteId: id } }); res.json(data) }) app.post("/card/:id", checkAuthenticated, async (req, res) => { const { Question, Answer, NoteId } = req.body; const newCard = await Card.create({ Question, Answer, NoteId }); res.redirect(`/card/${NoteId}`) });

Answer 1

In the scrollThroughCards function, boundary checks were not performed and the increment and decrement operators were misused.

 function scrollThroughCards(idx, data) { prevBtn.addEventListener("click", (e) => { // there's no more card on the left of index 0 // so exit the function early if (idx <= 0) return; flashCard.style.display = "none" setTimeout(() => { idx--; // decrease the index first // then use the modified index frontOfCard.innerHTML = data[idx].Answer backOfCard.innerHTML = data[idx].Question flashCard.style.display = "block" }, 1000) e.preventDefault() }) nextBtn.addEventListener("click", (e) => { // there's no more cards beyond the end of the list // so exit the function early if (idx >= data.length - 1) return; flashCard.style.display = "none" setTimeout(() => { idx++; // increase the index first // then use the modified index next frontOfCard.innerHTML = data[idx].Answer backOfCard.innerHTML = data[idx].Question flashCard.style.display = "block" }, 1000) e.preventDefault() }) }