JavaScriptでonclickが実行された際、メソッドから引数を受け取りたい

Question

onclickが実行された際、メソッドから引数を受け取りたい

JavaScriptでマルバツゲームを作っています。
実行ブラウザはGoogle Chromeです。
盤面がクリックされた際、マスに○印を描写する機能の実装中にエラーが発生しました。
コメントアウトされたハイフンで囲った箇所が該当箇所と思われます。

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

index.js:22 Uncaught TypeError: Cannot set property 'textContent' of null
    at HTMLTableCellElement.onClicked (index.js:22)

該当のソースコード

function initializeGame() {

  var boardTable = document.getElementById("boardTable");

  for (var i = 0; i < 3; i++) {
    var tr = document.createElement("tr");

    for (var j = 0; j < 3; j++) {
      var td = document.createElement("td");
      td.className = "cell";
      td.id = "cell" + i + '-' + j;

//------------------------------------------------------------
      td.onclick = onClicked;
      tr.appendChild(td);
    }
    boardTable.appendChild(tr);
  }
}

function onClicked(e) {
  var clickedCellId = e.target.id;
  document.getElementById("clickedCellId").textContent = "○";
}
//------------------------------------------------------------

試したこと

デバッグしてみたところ、メソッドonClickedの仮引数(e)に何も引数が渡されてないのかもしれないと思いました。

onclickというイベントが実行された際に、仕組みとして自動（？）でeventオブジェクトという実引数が、onclickプロパティにセットされたメソッドの仮引数に渡される認識だったのですが、この認識は間違っていますか？

どのようなコードにすれば改善されるか、教えて頂けると幸いです。
よろしくお願いいたします。

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

Google Chrome

Answer 1

メソッドonClickedの仮引数(e)に何も引数が渡されてないのかもしれない

違います。

e.target はクリックされた要素が渡されています。

エラーの原因は id を取得し、変数 clickedCellId に格納しているのに、文字列 "clickedCellId"（存在しない id の要素）を getElementById() したため、null が返却され、ご質問で示したエラーメッセージとなっています。

function onClicked(e) {
  console.log( e.target ); // 要素が渡されていることを確認できる。
  var clickedCellId = e.target.id;
  console.log( clickedCellId ); // id を確認できる
  document.getElementById(clickedCellId).textContent = "○";
}

ご質問のコードでは、全ての td 要素にイベントリスナを適用しているので、以下のようにできます。

function onClicked(e) {
  e.target.textContent = "○";
}

動くサンプル では、クリックする度に ○と×が切り替わる内容にしてみました。

Comments

[Kawachi236]

回答ありがとうございます。
原因から改善案までご提示頂き大変恐縮です。
console.logを使い細かにデバッグする方法、これから積極的に使っていきます。
また、動くサンプルも早速ローカルにコピペさせて頂きました。
よりよいコードを書けるよう勉強させていただきます！
ありがとうございました！

[AkitoshiManabe]

おそらく、盤面のサイズを動的変更されるのだろうと感じ、ご質問のコードをそのまま解説させていただきました。
table 要素に1回だけ同じイベントリスナを適用する バブリング を活用した方法もありますので、こちらも試してみると良いと思います。頑張ってください。

Answer 2

以下のように書く方ががシンプルだと思います。

function onClick(button){
  button.value= "○";
}
	

<input type="button" onclick="onClick(this)">

Comments

[Kawachi236]

回答ありがとうございます！
テーブルを使って書くよりも、ボタンを組み合わせて盤面を作ったほうがシンプル、ということでしょうか？
ボタンを使ったパターンも書いてみようと思います！