ボタンをクリックしてもイベントが発生しない

Question

ボタンをクリックしたらイベントを発生したいのですが、
クリックしても何も反応がない状態で、ブラウザの検証ツールのコンソールには、

edit:52 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at

とエラーが表示されている状態です。

~省略~
<script>
const test = document.getElementById("test");
        test.addEventListener('click', function(e){
        console.log('リンクがクリックされました。');
        // デフォルトのイベントをキャンセル
        e.preventDefault();
        }, false);
</script>
~省略~
<form action="{{ route('member.update') }}"
~省略~
</from>
~省略~
<div>
 <button type="submit" class="submit" id="test" form="change-myinfo">
 </button>
 </div>
~省略~

記述等に問題ありますでしょうか？

Comments

[itagagaki]

<script>～</script>を</body>の直前に置くとどうですか？

Answer 1

submitボタンをformの外に出したいならきちんとformにidを振って管理してください

<script>
document.addEventListener('click', e=>{
  if(e.target.closest('#test')){
    console.log('リンクがクリックされました。');
    e.preventDefault();
  }
});
</script>
<form id="change-myinfo">
<input name="hoge" value="123">
</from>
<div>
<button type="submit" id="test" form="change-myinfo"><span>ボタン</span></button>
</div>

Answer 2

良くあるミスですが、スクリプトが読み込まれて解析される時には button id="test" はまだ存在しないのでリスナーをアタッチできないのが原因です。

質問のスクリプトを window.onload = function() { ... } で囲う（スクリプトを ... の部分にする）とどうなりますか？

Answer 3

scriptの読み込ませる位置に問題があるように思えます。
上から順番に読み込まれていくのでid="test"が生成される前に、scriptが読み込まれるため、
id="test"に対してクリックイベントを発火させようとしても、対象のidが見つからないためエラーになっていると考えられます。

したがって、scriptを読み込ませる位置を一番最後に置いてみてはどうでしょうか？