質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

解決済

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

amber-0
amber-0

総合スコア1

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

1回答

0評価

1クリップ

201閲覧

投稿2022/06/28 21:17

編集2022/06/29 19:50

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

やりたいこと:進むボタンを押すと画像(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>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。