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

前提・実現したいこと

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/ツールのバージョンなど）

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

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

回答1件

ベストアンサー

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

投稿2020/03/20 13:03

kei344

総合スコア69407

mootoshi

2020/03/21 01:18

ありがとうございます。エラーがなくなりました。ちなみに確認してみるとボタンの表示はされていて、数字の16しか表示されないのですが、こちらの原因も教えていただけますでしょうか。何卒宜しくお願いします

kei344

2020/03/21 03:00

for(var i = 1 , i < max_spot ; i++) { /* 変数 i は {} の中で使う */ }

mootoshi

2020/03/21 03:38

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

kei344

2020/03/21 04:00

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

kei344

2020/03/21 04:18

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

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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