クリックしたらコピーされるようにしたい

前提

GASでサイトを作成しています。
テキストをクリックするとコピーされる機能を付けたいです。
なので下記サイトを参考にしてみたのですがうまく機能しません。

色々調べてみたのですが原因がわかりません。
一体どのようにすれば動作するのでしょうか？

どうかよろしくお願い致します。

クリック一つでクリップボードにコピーする機能（HTMLとJavaScriptのみで実現）

実現したいこと

テキストをクリックしたらspanタグの部分がコピーされるようにしたい

該当のソースコード

html
1<body>
2
3  <p class="copy" onclick="copyToClipboard()">『<span id="changeTXT">テキスト</span>』
4
5  <script>
6
7    function copyToClipboard() {
8      // コピー対象をJavaScript上で変数として定義する
9      var copyTarget = document.getElementById("changeTXT");
10
11      // コピー対象のテキストを選択する
12      copyTarget.select();
13
14      // 選択しているテキストをクリップボードにコピーする
15      document.execCommand("Copy");
16
17      // コピーをお知らせする
18      alert("コピーできました！ : " + copyTarget.value);
19    }
20
21  </script>
22
23</body>

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

回答1件

ベストアンサー

ブラウザのデベロッパーツールでエラーは確認しましたか？

       Uncaught TypeError: copyTarget.select is not a function
    at copyToClipboard
    at HTMLParagraphElement.onclick

というエラーが出てます。

結論からいうと、select() は textarea または input にしか使えません。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

だからたとえば下記のようにします。

html
1<body>
2
3  <p class="copy" onclick="copyToClipboard()">『<span id="changeTXT" >テキスト</span>』
4    
5  <script>
6    function copyToClipboard() {
7      const range = document.createRange();
8      range.selectNodeContents(document.getElementById('changeTXT'));
9
10      const selection = document.getSelection();
11      selection.removeAllRanges();
12      selection.addRange(range);
13    
14      document.execCommand('copy');
15      alert("コピーできました！ : " + range);
16    }
17  </script>
18  
19</body>