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

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

ただいまの
回答率

87.37%

JavaScript ルーレット プラウザ上でうまく表示されない

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,447

score 13

前提・実現したいこと

イメージ説明
JS 初心者です。
講師の人とコードを確認したのですが、それでもブラウザ上でうまく表示されません。
(講師の方からコードを送っていただいてコピペしてもプラウザ上での表示は以下になります。)
イメージ説明

ルーレットの条件は以下になります。

  • ルーレットの目を16個作成する
  • スタートボタンを押すとルーレットが回転する
  • 回転中はスタートボタンを押せなくする(ストップボタンで再び押せるようになる)
  • ルーレットの回転にランダム要素を組み込む
  • ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
  • ストップボタンを押した目が、ユーザに分かるようにする(目の色が変わるなど)
  • 一度ストップボタンで停止した目は次回以降は停止しない
  • スタートとストップを16回の繰り返しで、全ての目に停止する
  • 16回停止後はスタートボタンが押せなくなる(リセットボタンで押せるようになる)
  • 過去に停止した目が何か、ユーザに分かるようにする(目に色がつくなど)
  • リセットボタンを押すと初期表示の状態に戻る(もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる)
  • (ソースコード)比較演算子は、「===」や「!==」を利用すること

マス目の表示に関しては<table>を使わない方向で教えていただきたいです。

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

講師の方とコードは全て確認しているのですが間違いは見つかりませんでした。
パソコンはmacでサブライムテキストを使っています。
どこかコードにまだ気づけていない問題があるのか、それとも私が使っているサブライムテキストに問題があり、
皆さまのパソコン上ではルーレットが表示されるのか。
講師の方と確認しても原因がわからないため、表示させるためにどうすればいいか教えていただけると大変嬉しいです。
宜しくお願いします。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ルーレット</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link href="roulette.css" rel="stylesheet" type = "text/css">
    <script>
        //宣言
        var interval_id;
        var remove_spot;
        var roulette_flag = false;
        var now_spot      = 0;
        var spot_list     = new Array();
        const max_spot    = 16;

        // ルーレットが停止しているときのみ、スタート処理を開始(二重クリック防止)
        function start_roulette(){
            if (roulette_flag === false){

            // スタート&ストップを1度以上行っていた場合 ※if文はなくても通常動作するが、エラー回避のため記述
            if(remove_spot >= 0 && remove_spot <= max_spot){
            // ストップで停止したマスの色をスタート時に変更
            $('#spot' + remove_spot).addClass('light_out');
        }
            // ルーレット回転状態へ
            roulette_flag = true;

            // ルーレット開始
            interval_id = setInterval(spin, 50);
        }
    }


           // ルーレットが回転しているときのみ、ストップ処理を開始(二重クリック防止)
           function stop_roulette(){
               if(roulette_flag === true){

            // ルーレット停止
            clearInterval(interval_id);

            // 停止したマスの色を変更
            $('#spot' + spot_list[now_spot]).addClass('light_up_spot');

            // 停止したマスを点灯候補から削除
            remove_spot = spot_list.splice(now_spot, 1);

            // ルーレット停止状態へ
            roulette_flag = false;
        }
    }

            // ルーレット停止
            function reset_roulette(){
                clearInterval(interval_id);

            // ルーレット停止状態へ
            roulette_flag = false;

            // ルーレットに関する値を初期化
            remove_spot = null;
            now_spot = 0;
            spot_list = [];

            // ルーレットのマス目(HTML要素)を全削除
            $('#roulette').empty();

            // ルーレットのマス目(HTML要素)を再作成
            make_spot();
        }


            // 前回点灯したマスの色を削除
        function spin(){
                $('#spot' + spot_list[now_spot]).removeClass('light_up')

            // 次に点灯させるマスの番号を計算
            now_spot = randam_num(spot_list.length);

            // 点灯させるマスの色を変更
            $('#spot' + spot_list[now_spot]).addClass('light_up');
        }

        function randam_num(num){
            return Math.floor(Math.random() * num);
        }

            // 作成するルーレットのマスの数だけループ
        function make_spot(){
                for(var i = 1 ; i <= max_spot; i++) {

            // ルーレットのマス目(HTML要素)を作成
            $('#roulette').append('<div id="spot' + i +'" class = roulette">' + i + '</div>');
            spot_list.push(i);
        }
        $(document).ready(
            function(){
                make_spot();
                $('#start').click(start_roulette);
                $('#stop').click(stop_roulette);
                $('#reset').click(reset_roulette);
            });
        </script>
    </head>
    <body>
        <section id = "container">
            <section id = "roulette" class="clearfix">
            </section>
            <div id="handling">
                <button id = "start">スタート</button>
                <button id = "stop">ストップ</button>
                <button id = "reset">リセット</button>
            </div>
        </section>
    </body>
    </html>
@charset "UTF-8";

body{
font-size: 16px;
margin: 0;
}

#container{
width: 500px;
margin: 0 auto;
padding: 50px;
background: #F5F5F5;
}

#roulette {
width:408px;
border:solid 5px;
margin:0px auto 30px;
}

#handling{
text-align: center;
}

#handling button{
font-size: 24px;
padding:2px 6px 3px;
}

.clearfix:after {
content: "";
display: block;
clear: both;
}

.roulette{
width: 100px;
height: 100px;
font-size: 36px;
text-align: center;
line-height: 100px;
border: solid 1px;
float: left;
}

.light_up{
background-color: #FFA07A;
}

.light_up_spot{
background-color: #FF4500;
}

.light_out{
opacity:0.25;
}

試したこと

半角、全角がないか確認
AWS cloud9にも同じコードをサブライムテキストからコピペして確認したが上記の写真と同じ表示でした。

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

パソコン mac
サブライムテキスト使用

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

「}」が1つないようです。

あと、class="roulette"の記述がおかしいです。
誤: $('#roulette').append('<div id="spot' + i + '" class = roulette">' + i + '</div>');
正: $('#roulette').append('<div id="spot' + i + '" class="roulette">' + i + '</div>');

// 作成するルーレットのマスの数だけループ
function make_spot() {
  for (var i = 1; i <= max_spot; i++) {
    // ルーレットのマス目(HTML要素)を作成
    $('#roulette').append('<div id="spot' + i + '" class="roulette">' + i + '</div>');
    spot_list.push(i);
  }
} // ←こちらの「}」がないです。

$(document).ready(function () {
  make_spot();
  $('#start').click(start_roulette);
  $('#stop').click(stop_roulette);
  $('#reset').click(reset_roulette);
});

インデントを整えるようにすると、この手の初歩的な不具合は見つけやすいですよ

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/23 01:11

    大変助かりました。
    次回からしっかりインデント整えていきます。
    ありがとうございました。

    キャンセル

  • 2020/03/23 01:21

    あと、
    class = roulette"
    となっている箇所を見つけました。
    「"」の開始を追加すると動くかもしれません。

    (回答にも追記しています。)

    キャンセル

  • 2020/03/23 01:25

    本当に助かりました。おかげさまで写真のように表示することができました。
    引き続き宜しくお願い致します。

    キャンセル

+2

} が足りない。

        function make_spot(){
                for(var i = 1 ; i <= max_spot; i++) {

            // ルーレットのマス目(HTML要素)を作成
            $('#roulette').append('<div id="spot' + i +'" class = roulette">' + i + '</div>');
            spot_list.push(i);
        }
        } // ADD

動くサンプル:https://jsfiddle.net/5xLyjz4o/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/23 01:14

    大変助かりました。ありがとうございます。
    追加でお伺いしたいのですが、
    添付していただいたサンプルを4*4のマス目上記の写真のようにするにはどのようにしたらいいのでしょうか。

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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