JavaScriptでボタンを押したらクリップボードにコピーがうまくいきません

以下のコードで、なぜか「text.select();」をコメントアウトすると最後のfdadeが実行されるのですが、そのままだとfadeも実行されないことから、「text.select();」が原因のようです。

しかし、いくら調べてもこちらはそのまま使われているばかりで何が悪いのかわかりません。
わかる方がいらっしゃいましたら、どこが問題なのか教えてください。

HTML
1<input type='text' name= "あいさつ-01” id='あいさつ-03' value="123">
2<input type='text' name= "あいさつ-02” id='あいさつ-03' value="456">
3<input type='text' name= "あいさつ-03” id='あいさつ-03' value="789">
4
5<span class='btn' onclick="copy('あいさつ','03')"> copy </span>

function copy(a,b)
{

  let text = document.getElementById("#"+a+"-"+b);
  text.select();
  document.execCommand('copy');

　$("#"+a+"-"+b).fadeOut(0).fadeIn(500);
}

Lhankor_Mhy

2020/04/09 04:40

エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2

axs

2020/04/09 04:55

全くエラーが出ないので困っております。実行ログというのは「console.log()」ですよね？今使ってみているのですが、そもそも「text.select();」をコメントアウトしないと動かないことと、どの変数を入れるべきかがわからない状況です。よろしくお願いします。

tabuu

2020/04/09 05:08

Chromeであればconsoleにエラーメッセージが表示されていませんか？

hatena19

2020/04/09 05:11

HTML とその関数を実行している部分のコードを提示してもらわないと的確な指摘は難しいかと。「text.select();」が原因のよう」から推測するに、対象がテキストボックスかテキストエリア以外のselectできない要素なのかな、ということでしょうか。

axs

2020/04/09 05:12

ありがとうございます。こちらが表示されていました。 Unchecked runtime.lastError: The message port closed before a response was received. copy:760 null copy:760 null copy:760 null copy:760 null copy:760 null DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map

axs

2020/04/09 05:15

hatena19さんありがとうございます。 <input type='text' name= "あいさつ-01” id='あいさつ-03' value="123"> <input type='text' name= "あいさつ-02” id='あいさつ-03' value="456"> <input type='text' name= "あいさつ-03” id='あいさつ-03' value="789"> <span class='btn' onclick="copy('あいさつ','03')"> copy </span> HTMLは、このような状態です。

hatena19

2020/04/09 05:20

そのHTMLは質問文に追加してください。

axs

2020/04/09 05:24

hatena19さん問題は自己解決しましたが、HTMLの質問文への追加を完了しました。ありがとうございました。

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

回答2件

HTMLの引用符(”)が全角になっているのを半角(")になおす。
idが重複しているのてユニークなものに修正する。

html
1<input type='text' name= "あいさつ-01" id='あいさつ-01' value="123">
2<input type='text' name= "あいさつ-02" id='あいさつ-02' value="456">
3<input type='text' name= "あいさつ-03" id='あいさつ-03' value="789">
4
5<span class='btn' onclick="copy('あいさつ','03')"> copy </span>

getElementById("#"+a+"-"+b); の#が不要。(jQueryではないので)

js
1function copy(a,b)
2{
3
4  let text = document.getElementById(a+"-"+b);
5  text.select();
6  document.execCommand('copy');
7
8　$("#"+a+"-"+b).fadeOut(0).fadeIn(500);
9}