クリックしたらコピーできるようにしたい

表題の通り、クリックしたらtext部分をコピーできるようにしたいのですが、このコードだとコピーができません。。
初心者で申し訳ないのですが、どこが間違っているのか教えていただけるとありがたいです。
コンソールで確認するとエラーが出ていました。

Uncaught TypeError: Cannot read property 'addEventListener' of null

よろしくお願いします。

function txtCopy() {
  const target = document.getElementById('input_copy');
  if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
    target.readOnly = false;
    const range = document.createRange();
    range.selectNode(target);
    window.getSelection().addRange(range);
    document.execCommand('copy');
    target.readOnly = true;
  } else {
    target.select();
    document.execCommand('copy');
  }
  alert("コピーしました");
};
const trg = document.getElementById('btn_copy');
trg.addEventListener('click',txtCopy);

show.html.haml


.-# management_screenの画面
.header
  .header__center
    = link_to "#", class: "header__center__link" do
      Management screen
  .header__right_btn
    .header__right_btn__menu_btn
      = link_to "#", class: "header__right_btn__menu_btn__icon" do
        = icon('fas', 'align-justify')
  

.main
  .main__tweets_head_name
    = @user.name
  .main__tweets_head_sign_out_btn
    = link_to "ログアウト", destroy_user_session_path, method: :delete, class:"btn"
  .main__tweets_head_new_events_btn
    = link_to new_user_event_path(@user), class: "btn" do
      new_events
  .main__url_copy
    %input#input_copy{:readonly => "readonly", :type => "text", :value => "http://localhost:3000" + new_user_event_path(current_user)}/
    %button#btn_copy 送信URLをコピー

head部分の読み込みはapplication.html.hamlで行ってます。

application.html.haml

!!!
%html
  %head
    %title ConditionMyApp
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield

HTML

<body>
<div class='header'>
<div class='header__center'>
<a class="header__center__link" href="#">Management screen
</a></div>
<div class='header__right_btn'>
<div class='header__right_btn__menu_btn'>
<a class="header__right_btn__menu_btn__icon" href="#"><i class="fas fa-align-justify"></i>
</a></div>
</div>
</div>
<div class='main'>
<div class='main__tweets_head_name'>
test6
</div>
<div class='main__tweets_head_sign_out_btn'>
<a class="btn" rel="nofollow" data-method="delete" href="/users/sign_out">ログアウト</a>
</div>
<div class='main__tweets_head_new_events_btn'>
<a class="btn" href="/users/c7992877-9685-439e-8d5c-aeb317199c15/events/new">new_events
</a></div>
<div class='main__url_copy'>
<input id='input_copy' readonly='readonly' type='text' value='http://localhost:3000/users/c7992877-9685-439e-8d5c-aeb317199c15/events/new'>
<button id='btn_copy'>送信URLをコピー</button>
</div>
</div>

kyoya0819

2020/05/18 16:40

端末はなんですか？そもそも発火していますか？

mamiduka

2020/05/18 16:44

端末はPC（マックブック）です。このコードだと発火できていないですが、trg.addEventListener('click',txtCopy); のtrgを外したら（addEventListener('click',txtCopy);としたら）発火します。ただ、btnをクリックしたときだけ発火させるのができなくて、、、よろしくお願いします。

miyabi_pudding

2020/05/18 16:46

HTMLも提示お願いします。もしかしたら、ボタンを取得するのがうまく行ってないのかもしれません。

mamiduka

2020/05/18 16:52

すみません。コンソールで確認したらエラーが出ていました。上記に記載していますので、ご確認をお願いします。

miyabi_pudding

2020/05/18 17:32

これは、HTMLではなく、hamlですので、質問タグに、hamlを追加しましょう。ちょっと話変わってきますので・・・。あと、コンパイル後のHTMLコード（実際にブラウザで表示された時のコード）は記載できませんか？で、エラー文を見る限り、button#btn_copyが取得できていないので、おそらく、haml構文が間違ってるのかと。（button#btn_copy要素が出力されていない）

mamiduka

2020/05/18 17:37

ご指摘ありがとうございます。以後、気をつけます???? 編集して、HTMLのコードを載せましたのでご確認をよろしくお願い致します。

miyabi_pudding

2020/05/18 17:43

あ、なるほど、なんとなくわかりました。回答しますね。あと、質問タグ、今だと、JavaScriptだけになってるので、hamlの追加もしておきましょう。

mamiduka

2020/05/18 17:46

よろしくお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

button#btn_copyを、DOMが読み込まれる前に取得しようとしているからです。
（head要素に、scriptを挿入されている構文のため）
下記のように、DOMを読み込んでからJSを実行するようにすればいけるかと。

javascript
1document.addEventListener('DOMContentLoaded', function(){
2// DOMツリーが読み込まれてから実行する領域
3
4function txtCopy() {
5  const target = document.getElementById('input_copy');
6  if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
7    target.readOnly = false;
8    const range = document.createRange();
9    range.selectNode(target);
10    window.getSelection().addRange(range);
11    document.execCommand('copy');
12    target.readOnly = true;
13  } else {
14    target.select();
15    document.execCommand('copy');
16  }
17  alert("コピーしました");
18};
19const trg = document.getElementById('btn_copy');
20trg.addEventListener('click',txtCopy);
21
22});