javascriptで〇×ゲーム（Tic Tac Toe）を作りたい。盤上に〇×を表示させたい。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

　javascriptで〇×ゲームを作っています。ゲーム盤を表示させることはできましたが、盤に〇と×を表示することができません。とりあえず〇×さえ表示できれば良いのですが・・・

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

not availavle

該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>Tic Tac Toe </title>
6       <style>
7           #board{
8               background-color:black;
9           }
10           td.cell{
11               background-color:green;
12               width:30px;
13               height:30px;
14           }
15       </style>
16       <script>
17            function init(){
18                var b=document.getElementById("board");
19                for(var i=0;i<3;i++){
20                var tr=document.createElement("tr");
21                
22                for(var j=0;j<3;j++){
23                    var td=document.createElement("td");
24                    td.className="cell";
25                    td.id="cell"+i+j;
26                    td.onclick=clicked;
27                    tr.appendChild(td);
28                }
29                b.appendChild(tr);
30
31                }
32            
33            function clicked(e){
34                
35                document.getElementById("info").textContent=e.target.id+"clicked";
36               
37}
38
39            }
40
41           
42
43        </script>
44    </head>
45    <body>
46       
47      <body onload="init()">
48        <table id="board"></table>
49        <h2 id="info"></h2>
50       
51       
52    </body>
53</html>

試したこと

セルに〇を表示するために"board"や"cell"や"e.target.id"や"td"に"〇"を代入すること。
// e.target.id+"clicked"+"〇";
//document.getElementById("e.target").textContent="〇";
//e.target.id+"clicked"=td+"〇";
//clicked="info"+"〇" ;
//td.onclicked="〇";
などをfunction clicked(e)の中に書きましたが、Cannot set property 'textContent' of null と出たり、Invalid left-hand side in assignmentと出たりでinit()がnot definedになってしまいます。（書くときにはそれぞれ単体ずつ書いてます。//を外して書いています。）

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

ここにより詳細な情報を記載してください。

kei344

2020/11/01 05:15

「できない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

bot73145848

2020/11/01 05:30

追記しました！ご指摘ありがとうございます。

Automatic9045

2020/11/01 06:59

現在提示されているコード（試したことに書かれたコードではなく、今コードブロック内に書かれているコード）ではCannot set property 'textContent' of nullやInvalid left-hand side in assignmentが出る要因は無いように見えますが、現在のコードを実行した際にはどのようなエラーが出ますか？

bot73145848

2020/11/01 07:24

現在のコードではnot availableが出ます。ただ、盤上に〇や×を出すことはできません。

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

回答1件

ベストアンサー

代入やHTML要素取得、イベント処理など、基礎的な部分が掴めていないようなので、入門書など「体系立てた情報」を基に勉強することをお勧めします。

js
1e.target.id+"clicked"+"〇";
2```文字列を組み合わせただけで代入されていない。
3
4```js
5document.getElementById("e.target").textContent="〇";
6```文字列`e.target`をidに持つHTML要素を探しても見つかるはずも無い。（`e.target`に注目したのはとてもよい）
7```js
8e.target.id+"clicked"=td+"〇";
9```左辺にある連結した文字列に代入はできない。
10関数`clicked`の中で`td`は宣言されていない。あと、関数`init`の中にある`td`を想定しているとしたら、HTML要素に文字列を足しても意味は無い。
11```js
12clicked="info"+"〇" ;
13```関数`clicked`に文字列を代入しているだけ。
14```js
15td.onclicked="〇";
16```同じく`td`は宣言されていない。また、`onclicked`というイベントハンドラは無い。
17
18---
19
20
21```js
22e.target.textContent="O";
23```**動くサンプル：**[https://jsfiddle.net/xbdkp1ns/](https://jsfiddle.net/xbdkp1ns/)
24
25【Event.target - Web API | MDN】
26[https://developer.mozilla.org/ja/docs/Web/API/Event/target](https://developer.mozilla.org/ja/docs/Web/API/Event/target)