オブジェクトを順番に生成するJavaScriptボタン

Question

GIFをランダムに生成するボタンをJSで作成しました。 これを順番に表示して繰り返して変更したいと思います。

window.onload =() => { 
 
    const factsArr = [ 
 
\t { 
 
\t image:'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif', 
 
\t }, 
 
\t { 
 
\t image:'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif', 
 
\t }, 
 
    { 
 
\t image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', 
 
\t } 
 
    ]; 
 
    
 
    
 
    document.getElementById('generate-btn').addEventListener('click',() => { 
 
     const idx = Math.floor(Math.random() * factsArr.length); 
 
     document.getElementById('image').setAttribute('src', factsArr[idx].image) 
 
    }) 
 
     
 
}

<button id="generate-btn">Amazing Fact Button</button> 
 
<img id="image"></img>

Answer 1

、Iは画像アレイサイズに達したときに、各クリックとリセットに増加グローバルcurrImage変数を使用します。イメージはアレイのcurrImageインデックスから取得されます。

 
// Init the variable 
 
var currImage = 0; 
 

 
window.onload =() => { 
 
    const factsArr = [ 
 
\t { image:'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif'}, 
 
\t { image:'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif'}, 
 
     { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'} 
 
    ]; 
 
    
 
    document.getElementById('generate-btn').addEventListener('click',() => 
 
    { 
 
     document.getElementById('image').setAttribute('src', factsArr[currImage].image); 
 

 
     // increment the variable on each click 
 
     currImage++; 
 

 
     //reset the variable when it reaches the image array size 
 
     if (currImage == factsArr.length) 
 
      currImage = 0; 
 
    }) 
 
     
 
}

<button id="generate-btn">Amazing Fact Button</button> 
 
<img id="image"></img>

Answer 2

使用するアレイの現在のインデックスを示すために、数値変数を導入します。以下のスニペットで

const factsArr = [ 
 
    {image:'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif'}, 
 
    {image:'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif'}, 
 
    {image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'} 
 
]; 
 
const tot = factsArr.length; 
 
let c = 0; 
 

 
document.getElementById('generate-btn').addEventListener('click',() => { 
 
    document.getElementById('image').src = factsArr[c++ % tot].image; 
 
});

<button id="generate-btn">Amazing Fact Button</button><br> 
 
<img id="image">