javascriptでオセロつっくっています。駒の表示ができません。

初学者です。
javascriptでオセロをつっくています。
前回の質問ですべてのセルにidを振ることが出来ました。ありがとうございました。
今回は、画像の表示をさせたいのですが、appendChild()のところでエラーが出ます。

エラーメッセージ
Uncaught TypeError: Cannot read property 'appendChild' of null
at ban_set

アドバイスいただければ幸いです。何卒宜しくお願い致します。

javascript
1//オセロ
2var black=1;
3var white=-1;
4var empty=0;
5var turn=black;
6var board_data=[];
7
8window.onload=function(){
9  var board=document.getElementById("board");
10  init_boadeData();
11
12  for(var x=0;x<board.rows.length;x++){
13    for(var y=0;y<board.rows[x].cells.length;y++){
14      var select_cell=board.rows[x].cells[y];
15      select_cell.onclick=function(){
16        //クリックした時の動作
17        ban_set(x,y);
18        chenge_turn();
19     }
20    }
21  }
22};//onloadの終わり
23
24function init_boadeData(){
25  for (var x= 0;x < 8; x++) {
26       board_data[x] = [];
27       for (var y = 0; y < 8; y++) {
28           board_data[x][y] =empty;
29       }
30   }
31   board_data[3][3]=-1;
32   board_data[3][4]=1;
33   board_data[4][4]=-1;
34   board_data[4][3]=1;
35   ban_set(x,y);
36}
37
38function ban_set(x,y){
39  //全てのセルにidを振る
40  for(var x = 0; x< board.rows.length;x++){
41   for(var y = 0; y < board.rows[x].cells.length;y++){
42    board.rows[x].cells[y].id = "p" + x + y;
43    }
44  }
45  //idごとに値を設定
46  var piece_img=document.createElement('img');
47  var piece=document.getElementById("p"+x+y);
48  if (turn==black) {
49    piece_img.src="game_reversi_black.png";
50  }else if (turn==white) {
51    piece_img.src="game_reversi_white.png";
52  }
53      piece.appendChild(piece_img);
54 }
55
56
57//turnの交代
58function chenge_turn(){
59  if(turn==black){
60    turn=white;
61  }else if (turn==white) {
62    turn=black;
63  }
64}

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="othello.css">
6    <title></title>
7    <script type="text/javascript" src="./othello.js"></script>
8  </head>
9  <body>
10   <table id="board">
11      <tr>
12        <td></td>
13        <td></td>
14        <td></td>
15        <td></td>
16        <td></td>
17        <td></td>
18        <td></td>
19        <td></td>
20      </tr>
21     <!--省略-->
22      <tr>
23        <td></td>
24        <td></td>
25        <td></td>
26        <td></td>
27        <td></td>
28        <td></td>
29        <td></td>
30        <td></td>
31      </tr>
32    </table>
33  </body>
34</html>
35

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

回答2件

var piece=document.getElementById("p"+x+y);

この時点のx,yってfor抜けたあとの値になってませんか？
存在しない要素を参照しようとしてnullへのappendになってる気がします。
いつどこでなんの要素を追加するのか、ロジック整理した上でそのとおりの実装になっているかデバッグしてみてください。

投稿2021/03/15 04:39

m.ts10806

総合スコア80875

自己解決

すみません解決いたしました。下記のコードでエラーが消えました。
しかし、なぜか初期から右下端に駒が表示されてしまい、どこのセルを押してもそこで白黒が入れ替わるだけになってしまいました。

別の質問ですが、こちらのほうにもアドバイスいただけると幸いです。
よろしくお願いいたします。

javascript
1  for (var x= 0;x < 8; x++) {
2    for (var y = 0; y < 8; y++) {
3    var piece=document.getElementById("p"+x+y);
4     if (turn==black) {
5  　  piece_img.src="game_reversi_black.png";
6  　}else if (turn==white) {
7    　piece_img.src="game_reversi_white.png";
8    }　
9      piece.appendChild(piece_img);
10    }
11   }