clipboard.js: Illegal Constructor errors occuring on JavaScript API

Question

I'm trying to run a Copy URL event using clipboard.js. I have it installed on my server and the reference to clipboard.js is there in my code. So I have this in my footer:

<script type="text/javascript">
     var url = document.location.href;

    new Clipboard('.btn', {
        text: function() {
    return url;
  }
});
</script>

And this simply for my button:

<button class="btn">Copy</button>

Simple. And there's an example on SO that does work: Copy URL from browser using clipboard.js

But mine is throwing an Illegal Constructor error on my script and I'm really puzzled as to why. Am I forgetting something that's causing this error to appear?

Here's the Stack example: Copy URL from browser using clipboard.js

Here's what I got: https://dadventuresla.com/copy-link-test/

Have you tried assigning the `new Clipboard` to a variable, e.g. `var myBtn = new Clipboard(...)`? — Jack Bashford, Feb 27 '19 at 22:43
The snippet you linked to uses version 1.5 of the script; you are using version 2+. Either follow instructions in the docs for the current version, or include v1.5 on your website instead of the newer one. — , Feb 27 '19 at 22:54

score 2 · Accepted Answer · answered Feb 27 '19 at 22:58

2

as per https://clipboardjs.com/ it should be ClipboardJS

<script type="text/javascript">
     var url = document.location.href;

    new ClipboardJS('.btn', {
        text: function() {
    return url;
  }
});
</script>

answered Feb 27 '19 at 22:58

Shishir Arora

5,521
4
30
35

2

Thanks to you both. It's working now. Funny that the other example online only used 'Clipboard'. Must have been an earlier version of the script. – Adam Bell Feb 28 '19 at 02:09

score 2 · Answer 2 · answered Feb 27 '19 at 23:03

You have a typo - looking at the Clipboard docs, it shows you need to use ClipboardJS not Clipboard:

<script type="text/javascript">
    var url = document.location.href;
    new ClipboardJS(".btn", {
        text: function() {
            return url;
        }
    });
</script>

clipboard.js: Illegal Constructor errors occuring on JavaScript API

2 Answers2