javascriptで将棋を作りたいけど、コードが上手く反映されない

いつもお世話になっています。

私は、javascriptを使って将棋のゲームを作ろうとしており、現在は駒を置いていない将棋盤のみを表示させようとしているのですが、画面には何も表示されず、上手くいきません。

以下にコードを載せますので、何か解決案を教えていただけないでしょうか？
よろしくお願いいたします。

javascript
1  <script>
2  (function() {
3  var piece;
4  var showBoard = function() {
5    var b = document.getElementsByClassName("board");
6    while(b.firstChild){
7      b.removeChild(b.firstChild);
8    }
9    for(var y =1; y <= 9; y++){
10      for(var x = 1; x <= 9; x++){
11      var c = piece[board[x][y]].cloneNode(true);
12      c.style.left= ((x-1)*32) + "px";
13        c.style.top= ((y-1)*32) + "px";
14        b.appendChild(c);
15      }
16    }
17  };
18  var board = [];
19  onload = function() {
20    piece = [document.getElementsByClassName("cell")];
21    for(var i =0 ;i<10; i++) {
22      board[i]=[];
23      for(var j=0; j<10; j++) {
24        board[i][j] = 0;
25      }
26    }
27  showBoard();
28
29  };
30})();
31
32  </script>
33
34</head>
35<body>
36
37<div style="display:none;">
38  <div class="cell">　</div>
39</div>
40<div class="board"></div>

css
1.cell{
2  display: inline-block;
3  border:1px solid #000;
4  font-size: 14px;
5}

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

回答1件

ベストアンサー

document.getElementsByClassNameは、HTMLCollectionを返すため、特定の要素を取得したいならdocument.getElementsByClassName('hoge')[0]、あるいはdocument.querySelector()を使ってください。

document.getElementsByClassName
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

投稿2017/12/22 08:59

x_x

総合スコア13749

退会済みユーザー

2017/12/22 10:38

早速のご回答ありがとうございます。ご指摘通り、document.getElementsByClassName('hoge')[0]に変えることで上手く表示されました。本当にありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

javascriptで将棋を作りたいけど、コードが上手く反映されない

関連した質問