如何使用 JavaScript 讓我的數據顯示在 flash 卡上？

Question

現在我正在開發在前端和后端使用 JS 的全棧應用程序。 此應用程序允許用戶生成自己的一組 flash 卡。 每當用戶點擊“查看卡片”時，就會獲取數據，並在卡片的每一面顯示問題和答案。 它應該一次顯示一張卡片，並允許用戶使用“上一張”或“下一張”按鈕滾動瀏覽其他卡片。 我能夠成功獲取數據並將其轉換為 JSON 並且可以正確地從數據庫顯示中獲取至少一項。 問題是每當我嘗試滾動卡片時。 在瀏覽器返回錯誤之前，我只能滾動瀏覽一些卡片。 我什至注意到有些卡片無法正確渲染兩面。 我該如何解決這些問題？

 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

在scrollThroughCards function 中，沒有執行邊界檢查，並且誤用了遞增和遞減運算符。

 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() }) }