特定の要素にだけaddEventListenerする方法

Question

下記のコードによって、t1のボタンをクリックしたときにtestのいう文字がコンソールに書かれるという処理を実現したいのですが、うまくいきません。

<button id="t1" type="button">テスト</button>

document.getElementById('t1').addEventListener('click', function(e) {
    console.log("test");
});

一方で、下記のように修正すると一応動きます。
（もちろんボタン以外をクリックしても動いてしまいます）

document.addEventListener('click', function(e) {
    console.log("test");
});

公式のドキュメント等も参照したのですが、書き方は合っているように自分では思えます。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener#Add_a_simple_listener

問題点が知りたいです。
ご回答よろしくお願いいたします。

###環境
【ブラウザ】
Chrome: 75.0.3770.142
IE: 11.0.9600.19400
【その他】
PHP(Laravel)で生成したソースです。

Answer 1

ボタンが出来上がる前にスクリプトを宣言しているからでは？

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.getElementById('t1').addEventListener('click', function(e) {
    console.log("test");
  });
});
</script>

<button id="t1" type="button">テスト</button>

のようにDOMができてから設定するようにすればよいでしょう

Comments

[mrrcs]

示していただいたとおり実装するとうまく動きました。
ご回答ありがとうございました。