質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

330閲覧

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

axs

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/04/09 04:35

編集2020/04/09 05:22

以下のコードで、なぜか「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); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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の質問文への追加を完了しました。 ありがとうございました。
guest

回答2

0

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}

これでエラーなく動作するはずです。

投稿2020/04/09 05:24

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

axs

2020/04/09 05:34

ありがとうございます。 HTML部分ば、余分な分を省く為に即行で作った為、全角部分やIDの重複など新たな間違いを作ってしまいました。 根本原因が、まさに「#」が余分でした。 ありがとうございました。
guest

0

自己解決

原因がわかりました!

一行目
let text = document.getElementById("#"+a+"-"+b);

getElementByIdなのに、"#"から始めていることが原因だったようです。
こちらを削除することで正常に作動しました。
お騒がせしました。
m(_ _)m

投稿2020/04/09 05:19

axs

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問