ボタンを押すとランダム関数が走り、画像が遷移する方法 後編

こんにちは、ブヒブヒです。
自分が学んだ内容をメモのつもりで書いていきます。

絶賛javascriptを勉強中です。
課題でjavascriptをルーレットを作ったので共有します。
ルーレットを作るには「HTML」「CSS」「javascript」「DOM」使います。

HTML
画像
    <div id="target"></div>
    <div id="main">
      <img src="lunch/main.jpg" alt="おれのランチ" class="img_size">
    </div>
    <div id="slot">
      <img src="lunch/sushi.jpg" alt="寿司" class="hidden img_size">
    </div>
      <div class="footer_left">
        <div class="yakiniku_name1">
          本日のランチ
          <p class="yakiniku_name2">
            オレ
          </p>
        </div>
      </div>


ボタン
    <button class="btn-blue" id="start_btn">start</button>  
    <button class="btn-red" id="stop_btn">stop</button>


javascript
    const lunch_lists = [
        {
            title: "久兵衛",
            image: "lunch/sushi.jpg"
        },
        {
            title: "叙々苑",
            image: "lunch/jojoen.jpg"
        },
        {
            title: "オレ！！",
            image: "lunch/ore.jpg"
        }
    ];
    

DOM
    const target = document.getElementById('target');
    const start_btn = document.getElementById('start_btn');
    const main = document.getElementById('main');
    const slot = document.getElementById('slot').firstElementChild; 
    const stop_btn = document.getElementById( 'stop_btn'); 
    const lunch_title = document.querySelector('.yakiniku_name1').firstElementChild;
    

グローバル関数    
    let timer_id = 0; 

    
ランダム関数
    function randomImg(lunch_lists) {
        const rand = Math.floor(Math.random() * lunch_lists.length);  
        slot.setAttribute('src', lunch_lists[rand].image); 
        lunch_title.innerText = lunch_lists[rand].title;
    };
    
    
スタートボタン
    start_btn.addEventListener( 'click', function(e) { 
        main.classList.add('hidden'); 
        slot.classList.remove('hidden');
        timer_id = setInterval(() => { 
          randomImg(lunch_lists); 
        }, 90); 
    });
    
    
ストップボタン
    stop_btn.addEventListener("click", function (e) {
        clearInterval(timer_id); 
        // 300で再始動
        timer_id = setInterval(function () {
          randomImg(lunch_lists);
        }, 300);
        // ２秒後、700で再始動
        setTimeout(function () {
          clearInterval(timer_id)
          timer_id = setInterval(function () {
            randomImg(lunch_lists);
          }, 700);
        }, 2000);
        // ３秒後、停止
        setTimeout(function () {
          clearInterval(timer_id)
        }, 3000);
      });
 

ストップボタンをクリックすると
1.const stop_btn = document.getElementById( 'stop_btn'); を取得する。

2.const lunch_title = document.querySelector('.yakiniku_name1').firstElementChild;を取得。
＝　firstElementChildは「　

オレ

」を取得

3.ランダム関数に「 lunch_title.innerText = lunch_lists[rand].title;」
を追加して「lunch_title」の所に配列のtitleが入るようにする。

4.ストップボタンをクリックすると

5.stop_btn.addEventListener("click", function (e) {
clearInterval(timer_id);
});
　　　でストップできる。

※
① clearInterval
　　 setInterval() の呼び出しによって確立されたタイマーを利用した繰り返し動作を取り消します。
　　

②setInterval() と clearInterval()はセット
　　よく見たら、ストップするときにパネルのスピードを上げたり下げたり調整は
　　setInterval() と clearInterval()を繰り返している。

const lunch_title = 

1.スタートボタンを押すと
2.domでidのmain,slotを取得
3.main.classList.add('hidden');　の画像を隠す
4.slot.classList.remove('hidden');　で隠れていた画像を見せる。
　　　（CSSで当初から画像を隠している）
5.timer_id = setInterval(() => {randomImg(lunch_lists); }, 1000); });
　　　　で1秒ずつ、ランダムに遷移するように関数を作成