〇✕ゲームの盤面が描画されない問題を解決したい

前提

JavaScriptで〇✕ゲームを作成しています。
実行するとinit()関数によって8×８のマスが描画され、各マスをクリックすると、クリックされたマスに〇✕が描かれるように設計したのですが、プログラムを実行しても盤面の描画が行われません。

実現したいこと

プログラム実行時に盤面が描画されるようにしたいです。

発生している問題・エラーメッセージ

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3 <head>
4  <meta charset="utf-8">
5  <script>
6    var number=0;
7    //〇✕ゲームの盤面を作成するための関数    
8    function init() {
9                    var b = document.getElementById("board");
10                    for(var i = 0 ; i < 8 ; i++){
11                          var tr=document.createElement("tr");
12                          for(var j = 0 ; j <8 ; j++)
13                              {
14                                  var td = document.createElement("td");
15                                  td.className = "cell";
16                                  td.id = "cell" + i + j;
17                                  td.onclick = clicked;
18                                  tr.appendChild(td);
19        }
20                          b.appendChild(tr);
21      }
22                        
23    }
24   //〇、✕をクリックされたマスに書き込む関数    
25     function clicked(e){
26                       var ids=e.target.id;
27                       number++;
28        
29                     switch(number%2){
30                         case 0:
31                         document.getElementById("ids").textContent="〇";
32                         break;
33                             
34                         case 1:
35                         document.getElementById("ids").textContent="✕";
36                         break;
37      }
38    }
39  </script>
40 </head>
41 <body onload="init()">
42  <table id="board"></table>
43 </body>
44</html>

試したこと

参照しているテキストに記載されている、８×８マスのオセロを作成しているプログラムのコードと見比べてもスペルミス等はなく、clicked()の方のミスかとも思いこの部分をコメントアウトしても描画されませんでした。オセロのプログラムの方は問題なく描画されていました。

補足情報（FW/ツールのバージョンなど）

ブラウザはChromeで確認しています。よろしくお願いします。

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

回答4件

△△△△△△△△△△△△△△

投稿2022/09/01 11:11

MM_LL

総合スコア18

デベロッパツールにて再度確認したところ、描画はされているようでしたがサイズが小さく、また、白色で描画されていたため確認できなくなっているようでした。
CSSで盤面のマスのサイズ、及びマスの背景色を変更したところ理想の挙動となりました。
回答いただいた方々、ありがとうございました。

投稿2022/08/31 03:03

Fri

総合スコア5

javascript
1document.getElementById("ids").textContent = "〇";

の部分でidsというIDの要素を取得しようとしていますね。
idsという変数に収納されたidを取得する必要があるので

javascript
1document.getElementById(ids).textContent = "〇";

に変更してください。

投稿2022/08/30 07:39

gogoweb_ikeda

総合スコア1426

Fri

2022/08/31 02:44

回答ありがとうございます！変更してみましたが盤面の表記は行われませんでした。しかし、後々詰まるであろう部分だと思うのでご指摘いただけて助かりました！

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

ベストアンサー

td.onclick = clicked;

上記だと関数ではなく変数です。
functionによる定義ではなく以下のように実装する必要があるのでは。

JavaScript
1let clicked = function(e) {
2	var ids = e.target.id;
3	number++;
4
5	switch (number % 2) {
6		case 0:
7			document.getElementById("ids").textContent = "〇";
8			break;
9
10		case 1:
11			document.getElementById("ids").textContent = "✕";
12			break;
13	}
14
15}
16
17