javascript - ClipboardJS : Copy the content of a <code> section - Stack Overflow

I need to copy the content of a <code></code> section using ClipboardJS. When following the tutorial, I end up with this error :

Uncaught Error: Invalid "target" value, use a valid Element

Any workaround on this ?

EDIT:

HTML

<code id="#foo">my fantastic code</code>
    <button class="copy-button" data-clipboard-action="copy" data-clipboard-target="#foo">
      Copy !
</button>

JAVASCRIPT

<script type="text/javascript">
  var clipboard = new Clipboard('.copy-button');

  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>

I need to copy the content of a <code></code> section using ClipboardJS. When following the tutorial, I end up with this error :

Uncaught Error: Invalid "target" value, use a valid Element

Any workaround on this ?

EDIT:

HTML

<code id="#foo">my fantastic code</code>
    <button class="copy-button" data-clipboard-action="copy" data-clipboard-target="#foo">
      Copy !
</button>

JAVASCRIPT

<script type="text/javascript">
  var clipboard = new Clipboard('.copy-button');

  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>

• javascript
• clipboard.js

Share Improve this question Follow edited Oct 12, 2021 at 1:20 Rifky Niyas 2,07611 gold badge1414 silver badges2929 bronze badges asked Feb 23, 2017 at 17:52 user4187476user4187476 3

• Where is your actual code? It looks like you aren't selecting the element correctly. You can see here that it works fine on code elements. – Mike Cluck Commented Feb 23, 2017 at 17:53
• @MikeC Thank you for your input. I edited with my code – user4187476 Commented Feb 23, 2017 at 18:00
• 3 You have a typo. It should be <code id="foo">..., not <code id="#foo">... – Mike Cluck Commented Feb 23, 2017 at 18:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Try to change this line:

<code id="#foo">my fantastic code</code>

for

<code id="foo">my fantastic code</code>