オセロゲームの版を作成について

現在、オセロゲームをJ Queryで作成しております。
初心者で全くわからない状況からの作成でいろいろと質問して解決しながら作成していきたいと思います。

質問１、
現在、オセロのマス８x８をなんとか表示できたのですが、１から６４まで手書きしております。
これを　JQueryで短くかけないかと時間を費やしているのですが進まない状況です。
アドバイスお願いします。

　以下が、コードです

JQuery
1<script>
2        $(document).ready(function(){
3            var html='',
4            for(var i=0; i<64; i++){    //ここがエラー
5             html +=
6                 <div class="flex">
7                    <p class="bord"></p>
8            }
9            });
10        });
11    </script>

html
1           <body>
2      <h1 class="title">オセロ</h1>
3        <div class="wrapper">
4        <div class="flex">
5
6        <p class="bord">1</p>
7        <p class="bord">2</p>
8        <p class="bord">3</p>・・・・・<p class="bord">64</p>
9

CSS
1@charset "utf-8";
2*{
3  margin: 0;
4}
5.title{
6  text-align: center;
7  margin-bottom: 30px;
8}
9.wrapper{
10  display: flex;
11  justify-content: center;
12}
13.flex{
14  display: flex;
15  flex-direction: row;
16  justify-content: center;
17  flex-wrap: wrap;
18  width: 700px;
19  text-align: center;
20/*    align-content: center;*/
21}
22.bord{
23  width:80px; height:80px; background:darkgreen;
24  border: 2px solid black;
25}

kei344

2018/03/18 05:32

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答1件

ベストアンサー

コードを貼り付ける時は </> のアイコンをクリックしてその中に書いてください。
そうしないと消えてしまう文字もあります。
パッと見で「var html='',」←ここカンマじゃなくてセミコロンでは？と思いましたが。

◆追記 2018.03.18 15:01
これでどうですか？

javascript
1<script>
2$(document).ready(function(){
3    var html='';
4    for(var i=0; i<64; i++){
5    	html += '<p class="bord">' + String(i) + '</p>';
6    	if (i % 8 == 0) {
7    		html += "<br/>";
8    	}
9    }
10    $(".flex").html(html);
11});
12</script>

投稿2018/03/18 05:40

編集2018/03/18 06:02

yrema

総合スコア286

SatoshiSugiyama

2018/03/18 05:46

ご指摘の点パッと見で「var html='',」←ここカンマじゃなくてセミコロンでは？と思いましたが。変更して見ましたが、うまくいきませんでした。

SatoshiSugiyama

2018/03/18 06:18

ありがとうございます。うまく表示されました。記述内容での質問なのですが。１、 $(".flex").html(html);　この記述はどのような意味があるのでしょうか？２、htmlの方の記述は、以下のように変更してみましたがよろしいでしょうか？　　 <div class="flex"> 　　　　　<p class="bord"></p> 　　　　</div>