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

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

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

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

Q&A

解決済

3回答

973閲覧

clipboard.js

ogiogi

総合スコア11

JavaScript

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

0グッド

0クリップ

投稿2018/10/09 03:42

編集2018/10/10 01:49

clipbord.jpが動かない件
https://qiita.com/satthi/items/b4123c7683b4c3d93bf4
を参考にサイトでクリップボードにコピーをさせたいのですが、うまくいきません。
var clipboard = new Clipboard('.btn');
この行でエラーが出て、

Uncaught TypeError: Illegal constructor
at bt_index.html:30
(anonymous) @ bt_index.html:30

コンソールにこのメッセージがでます。

jsファイルは読み込んでいます。

サイトからコピペで持ってきて、alertを追加しました。下のコードを外部jsファイルに記述しても同じ
var clipboard = new Clipboard('.btn');
この行でのえらーがでます。

<!-- クリップボードにコピー --> <script type="text/javascript" src="js/clipboard.min.js"></script> <script type="text/javascript"> var clipboard = new Clipboard('.btn'); alert(clipboard); clipboard.on('success', function(e) { alert('コピーしました。'); }); clipboard.on('error', function(e) { alert('コピーに失敗しました。'); }); </script>

いただいた回答を元に下記HTMLにかきかえました。でも、また違ったエラーで解決しないので、html全文とエラーメッセージを記述いたします。

<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> </title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="css/slick-theme.css" rel="stylesheet" type="text/css"> <link href="css/slick.css" rel="stylesheet" type="text/css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> <script type="text/javascript" src="js/slick.min.js"></script> <script src="js/night.js"></script> <!-- クリップボードにコピー --> <script type="text/javascript" src="js/clipboard.min.js"></script> <script> var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); </script> </head> </head> <body> <header> </header> <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard </button> </body> </html> </script>

新たなエラーはこちらです。
clipboard.min.js:7 Uncaught TypeError: Cannot read property 'addEventListener' of null
at r (clipboard.min.js:7)
at a (clipboard.min.js:7)
at o (clipboard.min.js:7)
at e.value (clipboard.min.js:7)
at new e (clipboard.min.js:7)
at bt02_index.html:23
r @ clipboard.min.js:7
a @ clipboard.min.js:7
o @ clipboard.min.js:7
value @ clipboard.min.js:7
e @ clipboard.min.js:7
(anonymous) @ bt02_index.html:23

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

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

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

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

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

guest

回答3

0

記入ミスとおもいますが、</head>が2つあります
また、</html>の後ろに</script>があります。

<script>~</script>を</body>前に移すと動きました。
<body> <header> </header> <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard </button> <script> var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); </script> </body>

※ clipboard.js はCDNで実行しました。

HTML

1<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

投稿2018/10/10 02:12

miyakichi

総合スコア297

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

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

ogiogi

2018/10/12 08:38

miyakichi 様 本当にひどいHTMLでしたね、きずきませんでした。</head>が二つあった件は実際のお客様のサイトでもやってしまい、、、seoが妙に上がってこないこでHTML lintでチェックしてきずきました。ちなみに戻すとseoは良い感じになりました。以後きおつけたいと思います。その上、</script>まで変なところに、、、本当に、失礼いたしました。また、ありがとうございました。
guest

0

data-clipboard-target の指定がないのでは?

HTML

1<button type="button" class="btn" data-clipboard-target="対象要素" data-clipboard-text="この内容をコピーします">コピー</button>

投稿2018/10/09 04:53

miyakichi

総合スコア297

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

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

ogiogi

2018/10/10 01:43

やってみたのですが、だめでした。。。htmlをすべて公開いたしましたので、ご指摘があれば、よろしくお願いいたします。
guest

0

ベストアンサー

試してませんが、公式サイトを確認すると提供されてるAPIが変わってるような気がします。
一度こちらをお試しください。

https://clipboardjs.com/

new ClipboardJS('.btn');

【追記】
吐いてるエラーの意味がわかると大体当たりが付けやすいと思うので参考までに。

Uncaught TypeError: Illegal constructor
コンストラクタの実行出来ない(不当、不正である)

コンストラクタというのはざっくりいうと new ○○() で関数を呼び出したときの処理ことです。
コードで言うとnew Clipboard('.btn')の部分です。
これが不正と言われているのでClipboardという関数自体が存在しないかもという仮説を立てられます。

Uncaught TypeError: Cannot read property 'addEventListener' of null
nullにaddEventListenerというプロパティが無い

addEventListenerはDOM(HTMLElementなど)に対してクリックイベントなどのイベントを設定するための関数です。
本来であればHTMLElement.addEventListener()としないといけないところがnull.addEventListener()になってしまっているということですね。
それが無いということはDOMが選択出来ていないのではという予想が出来ます。

投稿2018/10/09 04:05

編集2018/10/10 04:18
keisukeh

総合スコア657

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

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

ogiogi

2018/10/10 01:44

確認してみました。参考URLの通りに書き換えてみたのですが、また違ったエラーが出ました。質問内容を編集いたしましたので、ご確認いただければ幸いです。よろしくお願いいたします。
keisukeh

2018/10/10 01:49

DOMの構築前に要素の取得を行っているからだと思います。 コードをbodyタグの閉じタグのすぐ上に書くか、jQueryのreadyの中に書いてみてください。
ogiogi

2018/10/10 01:55

おっしゃる通りでした。bodyタグのしたも、jqueryのreadyの中でも動きました。勉強になりました。ありがとうございました。
ogiogi

2018/10/12 08:32

keisukeh 様 解説ありがとうございます。DOMについて自分の理解が足りていないこともわかりました。 もっと頑張ります!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問