Cannot read property 'addEventListener' of nullの理由が分からない。

Question

前提・実現したいこと

プログラミングの初心者です。

javascriptでclickイベントを発火させようと思っているのですが、何故か上手く行きません。

function gamememo() {
  const game_submit = document.getElementById("comment-btn-id");
  console.log(game_submit);
  game_submit.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("アイウエオ");
~省略~
}
window.addEventListener("load", gamememo);

ちなみに、console.log(game_submit)の結果は、nullでした。
この理由が本当にわかりません。

また、chromeの検証ツールには以下のような記載がありました。

見ての通り、"Cannot read property 'addEventListener' of null"なので、game_submitがnullだと示されています。

また、HTMLのフォーム部分を貼り付けます。

    <%= form_with(model: [@game, @game_comment], url:game_game_comments_path(game_id: @game.id), id:"comment-form", local: true) do |f| %>
    <%= f.text_area :game_comment_text, placeholder:"対局を申し込もう！",class:"comment-text", id:"comment-text-id" %>
    <%= f.submit "対局の申し込み", class:"comment-btn", id:"comment-btn-id" %>

clickイベントを発火させたいのですが、それができず、その原因は

const game_submit = document.getElementById("comment-btn-id");

がnullであることは明白だと思いますが、この解決方法がわかりません。
どなたか、教えていただけないでしょうか。

Answer 1

loadイベントが起きた時点で comment-btn-id がIDの要素が(まだ)文書中にないのでしょう。確認方法を覚えるとよいですよ。以下、Google Chrome での確認方法です

1. 対象ページをChromeで開く
2. 開発者ツールを開く
3. 開発者ツールのSourcesタブでgamememo()の定義を探し、その中の1行目にブレークポイントをセット
4. 対象ページをリロード
5. ブレークポイントでスクリプト実行が止まるので、開発者ツールのElementsタブを表示してその時点で comment-btn-id の要素がないか確認する

---

問題の解決方法は、以下のどれかでしょうか:

1. comment-btn-id の要素が load イベントより前に生成されるようにする
2. gamememo() の実行を load イベントではなく comment-btn-id の要素が生成されるより後に移動する
3. 特定の要素に addEventListener() するのはやめる。例:

function gamememo() {
  document.addEventListener('click' e => {
    if (e.target.closest('#comment-btn-id')) {
      e.preventDefault();
      console.log("アイウエオ");
      ...
    }
  });

Comments

[s.mima]

int32_tさん、ご回答本当にありがとうございます！
アドバイスを元に自分で、やってみます。

[s.mima]

3の方法でやったら、できました！！
本当に本当にありがとうございます！
助かりました！

Answer 2

HTMLのフォーム部分を貼り付けます。

実際に生成されたHTMLはどのようになっていますか？

JavaScriptは生成後のHTMLを見て処理を行いますので、そちらできちんとIDが付いているか確認してみましょう。

Comments

[s.mima]

maisumakunさん、ご回答本当にありがとうございます。
ただ、初心者なもので、おっしゃっている意味が失礼ながら理解できません。
「生成後のHTML」とは、何のことでしょうか。

HTMLファイルとJavascriptファイル、全て添付します。
```
function gamememo() {
const game_submit = document.getElementById("comment-btn-id");
console.log(game_submit)
game_submit.addEventListener("click", (e) => {
e.preventDefault();
console.log("アイウエオ");
const formData = new FormData(document.getElementById("comment-form"));
const XHR = new XMLHttpRequest();
const list = document.getElementById("comment-list-id");
const gameId = list.getAttribute("game-comment-id");
console.log(gameId)
XHR.open("POST",`/games/${gameId}/game_comments`, true);
XHR.responseType = "json";
console.log(1);
XHR.send(formData);
console.log(2)
XHR.onload = () => {
if (XHR.status != 200) {
alert(`Error ${XHR.status}: ${XHR.statusText}`);
return null;
}
console.log(3)
const gamecomment = XHR.response.game_comment;
const formText = document.getElementById("comment-text-id");
const current_user_nickname = document.getElementById("current_user_nickname").textContent;
console.log(current_user_nickname)
const HTML = `
<div class="comment-list", id="comment-list-id">
<div class="comment-user">
対局希望者 : ${current_user_nickname} </br>
</div>
<div class="comment-content">
コメント内容 : ${gamecomment.game_comment_text}
</div>
</div>`;
console.log(HTML)
list.insertAdjacentHTML("beforebegin", HTML);
formText.value = "";
};
});

}
window.addEventListener("load", gamememo);
```
```
<table class="detail-table">
<tbody>
<tr>
<th class="detail-item">投稿者</th>
<td class="detail-value"><%= @game.user.nickname %></td>
</tr>
<tr>
<th class="detail-item">対戦者の希望日時</th>
<td class="detail-value"><%= @game.game_date %></td>
</tr>
<tr>
<th class="detail-item">使用する将棋アプリ</th>
<td class="detail-value"><%= @game.game_app %></td>
</tr>
<tr>
<th class="detail-item">対戦者の棋力</th>
<td class="detail-value"><%= @game.kiryoku.name %></td>
</tr>
<tr>
<th class="detail-item">対戦者からのコメント</th>
<td class="detail-value"><%= @game.text %></td>
</tr>
</tbody>
</table>

<div class="comment-box">
<%= form_with(model: [@game, @game_comment], url:game_game_comments_path(game_id: @game.id), id:"comment-form", local: true) do |f| %>
<%= f.text_area :game_comment_text, placeholder:"対局を申し込もう！",class:"comment-text", id:"comment-text-id" %>
<%= f.submit "対局の申し込み", class:"comment-btn", id:"comment-btn-id" %>
<% end %>
<p><コメント一覧></p>
<% @game_comments.each do |game_comment| %>
<div class="comment-list", id="comment-list-id" game-comment-id=<%= current_user.id %> >
<div class="comment-user">
対局希望者 : <%= game_comment.user.nickname %>
</div>
<div class="comment-content">
コメント内容 : <%= game_comment.game_comment_text %>
</div>
</div>
<% end %>
</div>

[maisumakun]

> 「生成後のHTML」とは、何のことでしょうか。

ブラウザの検証ツールなどで、Railsが吐き出した結果としてのHTMLを確認してください。

> HTMLファイルとJavascriptファイル、全て添付します。

Railsのソースコードが「意図したように処理されているか」が問題なので、Railsのコードを提示されても確認できません。

[s.mima]

maisumakunさん、大変失礼しました。https://gyazo.com/518b4d7b6bf3c8476401d27ae9348508

結果としては、上記のような表記になりました。

[maisumakun]

えっと、そこではなくてHTMLの方を確認してください。