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
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/12 08:38