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

前提・実現したいこと

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

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

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

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

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

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

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>ルーレット</title>
6	<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
7	<link href="roulette.css" rel="stylesheet" type = "text/css">
8	<script>
9		//宣言
10		var interval_id;
11		var remove_spot;
12		var roulette_flag = false;
13		var now_spot      = 0;
14		var spot_list     = new Array();
15		const max_spot    = 16;
16
17        // ルーレットが停止しているときのみ、スタート処理を開始(二重クリック防止)
18        function start_roulette(){
19        	if (roulette_flag === false){
20
21	        // スタート&ストップを1度以上行っていた場合 ※if文はなくても通常動作するが、エラー回避のため記述
22	        if(remove_spot >= 0 && remove_spot <= max_spot){
23	        // ストップで停止したマスの色をスタート時に変更
24	        $('#spot' + remove_spot).addClass('light_out');
25	    }
26	        // ルーレット回転状態へ
27	        roulette_flag = true;
28
29	        // ルーレット開始
30	        interval_id = setInterval(spin, 50);
31	    }
32	}
33
34
35           // ルーレットが回転しているときのみ、ストップ処理を開始(二重クリック防止)
36           function stop_roulette(){
37           	if(roulette_flag === true){
38
39	        // ルーレット停止
40	        clearInterval(interval_id);
41
42	        // 停止したマスの色を変更
43	        $('#spot' + spot_list[now_spot]).addClass('light_up_spot');
44
45	        // 停止したマスを点灯候補から削除
46	        remove_spot = spot_list.splice(now_spot, 1);
47
48	        // ルーレット停止状態へ
49	        roulette_flag = false;
50	    }
51	}
52
53	        // ルーレット停止
54	        function reset_roulette(){
55	        	clearInterval(interval_id);
56
57	        // ルーレット停止状態へ
58	        roulette_flag = false;
59
60	        // ルーレットに関する値を初期化
61	        remove_spot = null;
62	        now_spot = 0;
63	        spot_list = [];
64
65	        // ルーレットのマス目(HTML要素)を全削除
66	        $('#roulette').empty();
67
68	        // ルーレットのマス目(HTML要素)を再作成
69	        make_spot();
70	    }
71
72
73	        // 前回点灯したマスの色を削除
74	    function spin(){
75	        	$('#spot' + spot_list[now_spot]).removeClass('light_up')
76
77	        // 次に点灯させるマスの番号を計算
78	        now_spot = randam_num(spot_list.length);
79
80	        // 点灯させるマスの色を変更
81	        $('#spot' + spot_list[now_spot]).addClass('light_up');
82	    }
83
84	    function randam_num(num){
85	    	return Math.floor(Math.random() * num);
86	    }
87
88	        // 作成するルーレットのマスの数だけループ
89	    function make_spot(){
90	        	for(var i = 1 ; i <= max_spot; i++) {
91
92	        // ルーレットのマス目(HTML要素)を作成
93	        $('#roulette').append('<div id="spot' + i +'" class = roulette">' + i + '</div>');
94	        spot_list.push(i);
95	    }
96	    $(document).ready(
97	    	function(){
98	    		make_spot();
99	    		$('#start').click(start_roulette);
100	    		$('#stop').click(stop_roulette);
101	    		$('#reset').click(reset_roulette);
102	    	});
103	    </script>
104	</head>
105	<body>
106		<section id = "container">
107			<section id = "roulette" class="clearfix">
108			</section>
109			<div id="handling">
110				<button id = "start">スタート</button>
111				<button id = "stop">ストップ</button>
112				<button id = "reset">リセット</button>
113			</div>
114		</section>
115	</body>
116	</html>

css
1@charset "UTF-8";
2
3body{
4font-size: 16px;
5margin: 0;
6}
7
8#container{
9width: 500px;
10margin: 0 auto;
11padding: 50px;
12background: #F5F5F5;
13}
14
15#roulette {
16width:408px;
17border:solid 5px;
18margin:0px auto 30px;
19}
20
21#handling{
22text-align: center;
23}
24
25#handling button{
26font-size: 24px;
27padding:2px 6px 3px;
28}
29
30.clearfix:after {
31content: "";
32display: block;
33clear: both;
34}
35
36.roulette{
37width: 100px;
38height: 100px;
39font-size: 36px;
40text-align: center;
41line-height: 100px;
42border: solid 1px;
43float: left;
44}
45
46.light_up{
47background-color: #FFA07A;
48}
49
50.light_up_spot{
51background-color: #FF4500;
52}
53
54.light_out{
55opacity:0.25;
56}

試したこと

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

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

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

行動規範の内容に同意します

回答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/22 16:04

編集2020/03/22 16:20

new1ro

総合スコア4528

mootoshi

2020/03/22 16:11

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

new1ro

2020/03/22 16:21

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

mootoshi

2020/03/22 16:25

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

行動規範の内容に同意します

} が足りない。

js
1        function make_spot(){
2                for(var i = 1 ; i <= max_spot; i++) {
3
4            // ルーレットのマス目(HTML要素)を作成
5            $('#roulette').append('<div id="spot' + i +'" class = roulette">' + i + '</div>');
6            spot_list.push(i);
7        }
8        } // ADD
9```**動くサンプル：**[https://jsfiddle.net/5xLyjz4o/](https://jsfiddle.net/5xLyjz4o/)