JavaScriptでオセロの駒を表示させたい。

お世話になります。JavaScriptを用いて、オセロの盤に駒を表示させたいと思っております。
盤自体は、for文とdocument.createElement（）の組み合わせで作成することができたのですが、その盤に駒(piece)を表示させることができず困っております。お手数ですが、ご教授頂けたら幸いです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>オセロ</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
	
	<div id="main"><!-- 左側 -->
	  <table id="board"></table>
	</div><!-- 左側終わり -->
	<div id="detail"><!-- 右側 -->
	  <div id="turn">
	    <a id="now_turn">黒</a><a>の番です</a>
	  </div>
	  <div id="score">
	    <div id="white">
	      <a>白:</a><a id="white_score">10</a>
	    </div>
	    <div id="black">
	      <a>黒:</a><a id="black_score">10</a>
	    </div>
	  </div>
	  <div id="start">
	    <button>start</button>
	  </div>
	  <div id="reset">
	    <button>reset</button>
	  </div>
	</div><!-- 右側終わり -->

</div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>

#board {
	table-layout: fixed;
	width: 300px;
	height: 300px;
	border-collapse: collapse;
	background-color:green;
}

#board td {
	border: 2px solid;
}
#main{
	float: left;
}
#detail{
	margin:10px;
	width:200px;
	float: left;
}
#detail:after{
	clear: both;
}
#score > #white{
  margin:10px;
  padding:10px;
  border: 5px solid;
  border-color:black;
}

#score > #black{
  margin:10px;
  padding:10px;
  border: 5px solid;
  border-color:black;
}

//table id を取得する
var b = document.getElementById('board');
//table盤を定義する
for (var i = 0; i < 8 ; i++) {
	var tr = document.createElement('tr');
	var data = [0,0,0,0,0,0,0,0];
	for (var j = 0; j < 8 ; j++) {
		var td = document.createElement('td');
		td.className = 'cell';
		td.id = 'cell' + i + j;
		var a = document.createElement('a');
		a.className ='piece';
		a.id = 'piece' + i + j;
		var piece = document.getElementById('piece' + i + j");
		piece.innerHTML = "○";
		//td.onclick = clicked;
		tr.appendChild(td);
		td.appendChild(a);
	}
	b.appendChild(tr);
}

toutou

2017/03/13 00:04

var piece = document.getElementById('piece' + i + j"); jの隣に一個多くありませんか？

退会済みユーザー

2017/03/13 04:11

ご返信ありがとうございます。確かに、一個多かったので、修正いたしました。また、大変申し訳ございませんが後続の、回答者の方のソースで解決できましたので、そちらの方をベストアンサーに選ばせて頂きます。

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

回答1件

ベストアンサー

変数pieceがその直前で作成しているa要素ならば、直接innerHTMLプロパティを指定すれば良いのではないかと思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>オセロ</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        #board {
13            table-layout: fixed;
14            width: 300px;
15            height: 300px;
16            border-collapse: collapse;
17            background-color: green;
18        }
19
20        #board td {
21            border: 2px solid;
22        }
23
24        #main {
25            float: left;
26        }
27
28        #detail {
29            margin: 10px;
30            width: 200px;
31            float: left;
32        }
33
34        #detail:after {
35            clear: both;
36        }
37
38        #score > #white {
39            margin: 10px;
40            padding: 10px;
41            border: 5px solid;
42            border-color: black;
43        }
44
45        #score > #black {
46            margin: 10px;
47            padding: 10px;
48            border: 5px solid;
49            border-color: black;
50        }
51    </style>
52</head>
53<body>
54<div id="wrapper">
55
56    <div id="main"><!-- 左側 -->
57        <table id="board"></table>
58    </div><!-- 左側終わり -->
59    <div id="detail"><!-- 右側 -->
60        <div id="turn">
61            <a id="now_turn">黒</a><a>の番です</a>
62        </div>
63        <div id="score">
64            <div id="white">
65                <a>白:</a><a id="white_score">10</a>
66            </div>
67            <div id="black">
68                <a>黒:</a><a id="black_score">10</a>
69            </div>
70        </div>
71        <div id="start">
72            <button>start</button>
73        </div>
74        <div id="reset">
75            <button>reset</button>
76        </div>
77    </div><!-- 右側終わり -->
78
79</div>
80<script>
81    //table id を取得する
82    var b = document.getElementById('board');
83    //table盤を定義する
84    for (var i = 0; i < 8; i++) {
85        var tr = document.createElement('tr');
86        var data = [0, 0, 0, 0, 0, 0, 0, 0];
87        for (var j = 0; j < 8; j++) {
88            var td = document.createElement('td');
89            td.className = 'cell';
90            td.id = 'cell' + i + j;
91            var a = document.createElement('a');
92            a.className = 'piece';
93            a.id = 'piece' + i + j;
94            a.innerHTML = "○";
95            //td.onclick = clicked;
96            tr.appendChild(td);
97            td.appendChild(a);
98
99        }
100        b.appendChild(tr);
101    }
102</script>
103</body>
104</html>

また、以下のようにもできると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>オセロ</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        #board {
13            table-layout: fixed;
14            width: 300px;
15            height: 300px;
16            border-collapse: collapse;
17            background-color: green;
18        }
19
20        #board td {
21            border: 2px solid;
22        }
23
24        #main {
25            float: left;
26        }
27
28        #detail {
29            margin: 10px;
30            width: 200px;
31            float: left;
32        }
33
34        #detail:after {
35            clear: both;
36        }
37
38        #score > #white {
39            margin: 10px;
40            padding: 10px;
41            border: 5px solid;
42            border-color: black;
43        }
44
45        #score > #black {
46            margin: 10px;
47            padding: 10px;
48            border: 5px solid;
49            border-color: black;
50        }
51    </style>
52</head>
53<body>
54<div id="wrapper">
55
56    <div id="main"><!-- 左側 -->
57        <table id="board"></table>
58    </div><!-- 左側終わり -->
59    <div id="detail"><!-- 右側 -->
60        <div id="turn">
61            <a id="now_turn">黒</a><a>の番です</a>
62        </div>
63        <div id="score">
64            <div id="white">
65                <a>白:</a><a id="white_score">10</a>
66            </div>
67            <div id="black">
68                <a>黒:</a><a id="black_score">10</a>
69            </div>
70        </div>
71        <div id="start">
72            <button>start</button>
73        </div>
74        <div id="reset">
75            <button>reset</button>
76        </div>
77    </div><!-- 右側終わり -->
78
79</div>
80<script>
81    //table id を取得する
82    var b = document.getElementById('board');
83    //table盤を定義する
84    for (var i = 0; i < 8; i++) {
85        var tr = document.createElement('tr');
86        var data = [0, 0, 0, 0, 0, 0, 0, 0];
87        b.appendChild(tr);
88        for (var j = 0; j < 8; j++) {
89            var td = document.createElement('td');
90            td.className = 'cell';
91            td.id = 'cell' + i + j;
92            var a = document.createElement('a');
93            a.className = 'piece';
94            a.id = 'piece' + i + j;
95            tr.appendChild(td);
96            td.appendChild(a);
97            var piece = document.getElementById('piece' + i + j);
98            piece.innerHTML = "○";
99            //td.onclick = clicked;
100        }
101    }
102</script>
103</body>
104</html>