JavaScriptのfunction(複数の画像スライドショー)が機能しない。

前提・実現したいこと

JavaScript、HTML、CSS初心者です。

JavaScriptを使い、HTML上の複数の画像を自動切り替えさせる。
HTMLの画面イメージ：YouTubeのようにいくつものサムネイル画像がある。
それぞれの画像を自動切り替えさせたい。

ここに質問の内容を詳しく書いてください。
JavaScriptのFunctionを作成して、一つの画像自動切り替えできました。
複数のFunction（３つ）を作成すると、IMGタグに複数のJavaScriptのFunctionが作用して、動作しません。
ローカル設定できるように、idやclassの設定も試行しました。

発生している問題・エラーメッセージ

どうすれば、おなじTHML内において、複数のJavaScriptのfunctionを動作させられるのでしょうか。

エラーメッセージ

該当のソースコード

【【--------自分で作成したソースコード--------】】

【--------ソースコード内訳①：Index_test.htmlのファイル--------】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <title>プログラミング練習</title>
        <link rel="stylesheet" href="style_test.css">
    </head>
    <body>   
    <h1>JS プログラミング練習：複数の画像スライドショー</h1>
    <div id="CompanyA">
    <img src="CompanyA/imageA-1.jpg" id="slide_imgA" class="slider">
    <script type="text/javascript">/*JS 画像自動スライドショーCompanyA*/
        const img_srcA = ["imageA-1.jpg", "imageA-2.jpg", "imageA-3.jpg"];
        let num = -1;
        function slide_timeA() {
           if (num === 2) {
             num = 0;
           } 
           else {
             num++;
           }
           document.getElementById("slide_imgA").src ="imagesA/" + img_srcA[num];
        }
        setInterval(slide_timeA, 1500);
    </script>
    </div>

    <div id="CompanyB">
        <img src="CompanyB/imageB-1.jpg" id="slide_imgB" class="slider">
        <script type="text/javascript">/*JS 画像自動スライドショーCompanyB*/
            const img_srcB = ["imageB-1.jpg", "imageB-2.jpg", "imageB-3.jpg"];
            let num = -1;
            function slide_timeB() {
               if (num === 2) {
                 num = 0;
               } 
               else {
                 num++;
               }
               document.getElementById("slide_imgB").src ="imagesB/" + img_srcB[num];
            }
            setInterval(slide_timeB, 1500);
        </script>
    </div>

    <div id="CompanyC">
        <img src="CompanyC/imageC-1.jpg" id="slide_imgC" class="slider">
        <script type="text/javascript">/*JS 画像自動スライドショーCompanyC*/
            const img_srcC = ["imageC-1.jpg", "imageC-2.jpg", "imageC-3.jpg"];
            let num = -1;
            function slide_timeC() {
               if (num === 2) {
                 num = 0;
               } 
               else {
                 num++;
               }
               document.getElementById("slide_imgC").src ="imagesC/" + img_srcC[num];
            }
            setInterval(slide_timeC, 1500);
        </script>
    </div>
    </body>    
</html>

【--------ソースコード内訳②：style_test.cssのファイルのソースコード--------】
@import url(sanitize.css)
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

body {
    background-color: rgb(217, 243, 197);
    padding: 10px;
    font-size: 16px;
    color: rgb(10, 64, 241);
}

header { 
    background-color: rgb(248, 248, 246);
    padding: 10px;
    color: rgb(10, 34, 245);
}

/*JS 画像自動スライドショーのクラス設定*/
.slider {
  width: 600px;
  height: 338px;
  margin: 5px;
}

【【--------自分で作成したソースコードここまで--------】】


【【--------他のサイトから引用したソースコード--------】】
【JavaScript】
 <script>
      const img_src = ["img1.jpg", "img2.jpg", "img3.jpg"];
      let num = -1;
 
      function slide_time() {    /*☚このfunctionをslide time1、2…のようにサムネイル窓枠の数だけ作りたい*/
        if (num === 2) {
          num = 0;
        } else {
          num++;
        }
        document.getElementById("slide_img").src = img_src[num];
      }
 
      setInterval(slide_time, 1300);
    </script>



【HTML】
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>slide_show</title>
  </head>
  <body>
    <img src="img1.jpg" id="slide_img" class="slider" /> <!--imgタグをYouTubeの画面のように複数配列させるデザイン-->
     </body>
</html>


【CSS】
img {
  width: 400px;
  height: 250px;
  margin: 50px;
}

参考したサイト
「簡単にできる！ JavaScriptでスライドショーを作る方法」ウェブカツより引用
https://webukatu.com/wordpress/blog/7073/

試したこと

JavaScriptのfunction関数をlocal適用できるように、let、idタグ、classタグを試行した。

補足情報（FW/ツールのバージョンなど）

m.ts10806

2022/01/02 23:20

ファイルが別ならコードブロックも別にしてもらった方が。あと＞引用したサイトのリンクを末尾に表示これはどういうことでしょうか。提示のHTMLには何も書かれていませんが。

m.ts10806

2022/01/02 23:21

>複数のFunctionを作成するとどういうコードにしたのでしょうか。

K.YUMA

2022/01/03 07:24

m.ts10806様へソースコードの箇所に自分で作成したソースコードを追加編集しました。 JavaScript（プログラミング）を始めたばかりで、コードブロックをどのようにすればよいか調べきれませんでした。 HTMLのコードの中に <div id="CompanyA">タグ、<div id="CompanyB">タグ、<div id="CompanyC">タグを３つ作成して、その中にJavaScriptのfunctionを３つ（slide_timeA、slide_timeB、slide_timeC）作成しました。＞引用したサイトのリンクを末尾に表示「引用したサイトのリンクを末尾に表示」とは、自分でソースコードを作成するにあたり、参照したサイトを示していました。下部の方に以下のように示していました。「簡単にできる！ JavaScriptでスライドショーを作る方法」ウェブカツより引用 https://webukatu.com/wordpress/blog/7073/