按顺序生成对象的JavaScript按钮

我在JS中创建了一个随机生成GIF的按钮， 我想改变这一点，让它们按顺序出现，然后重复

window.onload=（）=>{
常数事实=[
{
图像：'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif',
},
{
图像：'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif',
},
{
图像：'https://media.giphy.com/media/1nkUav308CBws/giphy.gif',
}
];
document.getElementById（'generate-btn'）。addEventListener（'click'，（）=>{
const idx=Math.floor（Math.random（）*factsArr.length）；
document.getElementById（'image'）.setAttribute（'src'，factsArr[idx].image）
})
}

惊人事实按钮

引入一个数字变量，以指示要使用的数组的当前索引

const factsArr=[
{图像：'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif'},
{图像：'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif'},
{图像：'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'}
];
常数tot=事实长度；
设c=0；
document.getElementById（'generate-btn'）。addEventListener（'click'，（）=>{
document.getElementById（'image'）.src=factsArr[c++%tot].image；
});
惊人事实按钮

在下面的代码片段中，我使用了一个全局
currImage
变量，该变量在每次单击时都会增加，并在达到图像数组大小时重置。图像取自阵列的
currImage
索引



//初始化变量
var-currImage=0；
window.onload=（）=>{
常数事实=[
{图像：'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif'},
{图像：'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif'},
{图像：'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'}
];
document.getElementById（'generate-btn'）。addEventListener（'click'，（）=>
{
document.getElementById（'image'）.setAttribute（'src'，factsArr[currImage].image）；
//每次单击时递增变量
currImage++；
//当变量达到图像数组大小时重置该变量
if（currImage==factsArr.length）
currImage=0；
})
}
惊人事实按钮
您到底想做什么？目前的行为？预期的行为？@TalalKhraisat很乐意帮忙。如果这个答案有帮助的话，请接受正确的答案。这也可以用模运算来完成<代码>currImage++；currImage%=factsArr.length

这里的好处是，您可以将这两个语句组合起来，执行

factsArr[（currImage++）%factsArr.length].image

。但是使用if语句可以更清楚地了解到底发生了什么。。