お世話になります。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); }
var piece = document.getElementById('piece' + i + j"); jの隣に一個多くありませんか?
ご返信ありがとうございます。確かに、一個多かったので、修正いたしました。また、大変申し訳ございませんが後続の、回答者の方のソースで解決できましたので、そちらの方をベストアンサーに選ばせて頂きます。
回答1件
あなたの回答
tips
プレビュー