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

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

ただいまの
回答率

87.48%

JavaScript ルーレット マス目の表示

解決済

回答 1

投稿 編集

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

score 13

前提・実現したいこと

JavaScript初心者です。
JavaScriptを使ってルーレットを作成しています。
マス目を表示させたいです。
現状数字の16しか表示されていません。
宜しくお願いします。

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

16マス(4*4)を表示させることができない。
<table>を使わないで以下のソースコードに対して追記もしくは修正すべき点を教えていただきたいです。

該当のソースコード

<!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">
    <style type = "text/css">
        table,td {
            border:solid 1px black;
            font-size: 70px;
        }
    </style>
    <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){
            // ストップで停止したマスの色をスタート時に変更
            $('#stop'+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.randam()*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>
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;
}
.container{
           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;
}

試したこと

<table> を使ってマス目の表示をすることはできました。
スペースの確認
{}()不足部分がないかの確認

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

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

// for(var i = 1 , i < max_spot ; i++)
//               ↓
   for(var i = 1 ; i < max_spot ; i++)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/03/21 12:38

    何度もすみません。このように表示するということでしょうか。
    function make_spot(){
    for(var i = 1 ; i < max_spot ; i++)
    }
    こちらで試してもうまくいきません。認識違いでしたら申し訳ございません。

    キャンセル

  • 2020/03/21 13:00

    違います。function はどこから出てきたのでしょう。
    入門書等を買って、制御構文を確認しなおすことをお勧めします。

    キャンセル

  • 2020/03/21 13:18

    (回答が反映できていなかったので再投稿)
    for(var i = 1 ; i < max_spot ; i++) {
    /* 変数 i は {} の中で使う */
    }

    キャンセル

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

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

関連した質問

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