如何使用JavaScript将数据显示在闪存卡上？

现在我正在开发在前端和后端使用JS的完整堆栈应用程序。此应用程序允许用户生成自己的一组闪存卡。每当用户单击“查看卡片”时，就会提取数据，并在卡片的每一侧显示问题和答案。它应该一次显示一张卡，并允许用户使用“上一张”或“下一张”按钮滚动其他卡。我能够成功地获取数据并将其转换为JSON，并且能够正确地从数据库显示中获取至少一项。问题是每当我试图滚动卡片时。在浏览器返回错误之前，我只能滚动浏览一些卡片。我甚至注意到有些卡片不能正确地呈现两面。我如何解决这些问题

const flashCard=document.querySelector（“.flashCard”）；
const flipBtn=document.querySelector（“.flipBtn”）；
const prevBtn=document.querySelector（“.prev btn”）；
const nextBtn=document.querySelector（“.next btn”）；
让frontOfCard=document.querySelector（“.front content”）；
let backOfCard=document.querySelector（“.back content”）；
常量显示卡=（）=>{
getCardInfo（）
flipBtn.innerHTML=“翻转”
flipBtn.removeEventListener（“单击”，显示卡）
}
flipBtn.addEventListener（“单击”，显示卡）
常数flash=（）=>{
如果（flashCard.style.transform！=“rotateX（180度）”）{
flashCard.style.transform=“rotateX（180度）”
}否则{
flashCard.style.transform=“无”
}
}
const getCardInfo=async（）=>{
常量项体={
方法：“放”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”
}
}
const data=wait fetch（window.location.href，itemBody）
const jsonData=wait data.json（）
console.log（jsonData）
设idx=0；
frontOfCard.innerHTML=jsonData[idx]。回答
backOfCard.innerHTML=jsonData[idx]。问题
flashCard.style.display=“block”；
flipBtn.addEventListener（“单击”，闪烁）；
滚动卡片（idx、jsonData）；
}
功能滚动卡片（idx，数据）{
prevBtn.addEventListener（“单击”，（e）=>{
flashCard.style.display=“无”
设置超时（（）=>{
frontOfCard.innerHTML=数据[idx-->。回答
backOfCard.innerHTML=数据[idx--]。问题
flashCard.style.display=“块”
}, 1000)
e、 预防默认值（）
})
nextBtn.addEventListener（“单击”，（e）=>{
flashCard.style.display=“无”
设置超时（（）=>{
frontOfCard.innerHTML=数据[idx++]。回答
backOfCard.innerHTML=数据[idx++]。问题
flashCard.style.display=“块”
}, 1000)
e、 预防默认值（）
})
}

在

滚动卡片

功能中，未执行边界检查，并且误用了递增和递减运算符

函数滚动卡片（idx，数据）{
prevBtn.addEventListener（“单击”，（e）=>{
//索引0左侧不再有卡
//所以尽早退出函数
如果（idx{
idx--；//首先减少索引
//然后使用修改后的索引
frontOfCard.innerHTML=数据[idx]。回答
backOfCard.innerHTML=数据[idx]。问题
flashCard.style.display=“块”
}, 1000)
e、 预防默认值（）
})
nextBtn.addEventListener（“单击”，（e）=>{
//名单末尾没有牌了
//所以尽早退出函数
if（idx>=data.length-1）返回；
flashCard.style.display=“无”
设置超时（（）=>{
idx++；//首先增加索引
//然后接下来使用修改后的索引
frontOfCard.innerHTML=数据[idx]。回答
backOfCard.innerHTML=数据[idx]。问题
flashCard.style.display=“块”
}, 1000)
e、 预防默认值（）
})
}