JavaScript addEventListenerの動かし方がわかりません

Question

前提・実現したいこと

addEventListener未経験です。
該当のソースコードでは動かなかったのですが、なぜでしょうか？
同一ページに書いております

該当のソースコード

<script>
    var btn = document.getElementById('btn');
     
     
    btn.addEventListener('click', function() {
      
        alert('クリックされました！');
      
    }, false);
</script>
<button id="btn">表示</button>

Comments

[m.ts10806]

どのように操作したのでしょう。

[qzd]

下記のようにしたところ、動きました

<button id="btn">表示</button>
<script>
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {

alert('クリックされました！');

}, false);
</script>

[m.ts10806]

お聞きしたいのは「操作」なのですが…
まあ、いいか。
「document ready」とか「document load」とかで調べておいてください。
おそらくそれで理由が分かります

Answer 1

解決しました。ありがとうございました

Comments

[m.ts10806]

自己解決は良いとして、これではどう解決したか分かりません。
https://teratail.com/help#resolve-myself

質問も回答も編集できますので。