質問編集履歴

2 書式の改善

mootoshi

mootoshi score 13

2020/03/21 10:49  投稿

JavaScript ルーレット マス目の表示とエラーの原因
JavaScript ルーレット マス目の表示
```ここに言語を入力
コード
```### 前提・実現したいこと
### 前提・実現したいこと
JavaScript初心者です。
JavaScriptを使ってルーレットを作成しています。
roulette.html:96 Uncaught SyntaxError: Unexpected token '<'
現状数字の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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
  • JavaScript

    37920 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    17439 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1 CSSソースコードの追加

mootoshi

mootoshi score 13

2020/03/21 10:45  投稿

JavaScript ルーレット マス目の表示とエラーの原因
### 前提・実現したいこと
```ここに言語を入力
コード
```### 前提・実現したいこと
JavaScript初心者です。
JavaScriptを使ってルーレットを作成しています。
マス目を表示させたいのと検証で確認した時に96行目エラーと以下のように表示されるため原因を知りたいです。
roulette.html:96 Uncaught SyntaxError: Unexpected token '<'
宜しくお願いします。
### 発生している問題・エラーメッセージ
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
  • JavaScript

    37920 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    17439 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る