Q&A
前提・実現したいこと
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件
0
ベストアンサー
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
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/21 01:18
2020/03/21 03:00
2020/03/21 03:38
2020/03/21 04:00
2020/03/21 04:18