javascriptの配列処理をランダムに分岐

Question

初めての質問失礼します。

やりたいこと：進むボタンを押すと画像（main1.png～main6.png）が順番に表示される。main6.pngまで表示された後、sk_ariかsk_nasiの配列をランダムに選び、順番に表示させる。

問題点：画像（main1.png～main6.png）が順番に表示されるところまではできているのですが、sk_ariとsk_nasiの分岐の際、以下のエラーがでてうまく動きません。
・Uncaught SyntaxError: Unexpected string (at index.j index.js:5:22)
・ Unchecked runtime.lastError: The message port closed before a response was received.

 <!-- 最初に表示する画像 -->
    <div class="container d-flex justify-content-center mt-2">
      <img id="mypic" class="img-fluid rounded" src="/img/main1.png">
    </div>

      <div class="parent d-flex justify-content-center">
        <!-- 進むボタン -->
        <div class="children1 m-3">
          <input type="button" value="" onclick="go_back()" class="goback border border-0">
        </div>  
        <!-- 戻るボタン -->
        <div class="children2 m-3">      
          <input type="button" value="" onclick="go_forward()" class="goforward border border-0">
        </div>
      </div>

      <!-- テストを始めるボタン
      <div class="d-flex justify-content-center">
        <button id="startex" class="btn btn-success btn-lg" type="button" onclick="location.href='/startex.html'">課題を始める！</button>
      </div>   -->

          <script>
          // 1~6の画像を表示する
          var pics_src = new Array
          ("/img/main1.png",
          "/img/main2.png",
          "/img/main3.png",
          "/img/main4.png",
          "/img/main5.png",
          "/img/main6.png");
          var num = 0;
    
          // numが4までの処理
          if(num <=4){
            function go_forward(){
              if (num == 5) {
              }
              else {
                  num ++;
              }
              document.getElementById("mypic").src=pics_src[num];
            }
          
            function go_back(){
              if (num == 0) {
              }
              else {
                num --;
              }
              document.getElementById("mypic").src=pics_src[num];
            }
          }
          
            // 配列の定義（SKあり）
            let sk_ari = 
            ["/img/main10.png",
            "/img/main7-1-1.png",
            "/img/main7-1-2.png",];
            
            // 配列の定義（SKなし）
            let sk_nasi = 
            ["/img/main10.png",
            "/img/main7-2-1.png",
            "/img/main7-2-2.png",];
            
            // numが5になった時、ランダムに配列を取得（sk_random）
            if(num >= 5){
              const ogi_random =[[sk_ari],[sk_nasi]];
              console.log(ogi_random);
                
              const sk_random = ogi_random[Math.floor(Math.random() * 1)][0];
                
              // 確認
              console.log(sk_random);
            

              // 進むボタンを押したときの挙動
              function go_forward(){
                if (num == 8) {
                  // 課題をスタートするボタンを表示
                  document.getElementById("startex").style.display = 'block'
              }
              else {
                num ++;
              }
              document.getElementById("mypic").src=sk_random[num];
              }
            
              //戻るボタンを押したときの挙動
              function go_back(){
                if (num == 8) {
                }
                else {
                num --;
                }
                document.getElementById("mypic").src=sk_random[num];
              }          
            }
            </script>

Answer 1

scriptタグ内のコードは1回しか実行されないのでそこで条件分岐しても関数の切り替えはできません。
numの値をみて関数を切り替える関数を作っておき、go_forward関数 go_back関数から呼び出すような形にする必要があると思います。
あと関数を切り替えたいなら直接関数を定義するのではなく、変数に代入して呼び出す形にするほうがいいと思いますよ。
#ちょっと試してみたらChromeだと関数を二重に定義しても後に定義したほうが有効になるだけっぽかったんですけど他の言語等だとエラーになる環境のほうが多いかと

Comments

[amber-0]

ありがとうございます！
教えていただいた方法でやってみます。