Html Question posted in
Some basic documentation can be found here.

How to assign copy to clipboard button to specific text HTML & JavaScript

I’m trying to create a number of buttons on my site to copy respective texts to clipboard, but all the buttons seem to be copying the last text.

I used a different id attribute for each text to be copied and a matching id attribute in the JavaScript getElementById() area for that text.

I’m thinking maybe I need to use unique onclick() functions for each of them instead of copyClipboard() for all of them.

P.S: I’m not a programmer, I’m more of a script kiddie.

Here is the code I used…

(Both buttons end up copying the second text. I want each button to copy its respective text.)



<script>

function copyClipboard() {

    var copyText = document.getElementById("one").innerHTML;

   

    var input = document.createElement("input");

    input.value = copyText;

    document.body.appendChild(input);

    input.select();

    document.execCommand("copy");

    document.body.removeChild(input);

  }</script>

<button onclick="copyClipboard()">copy</button>

<p id="one">first</p>


<script>

    function copyClipboard() {

        var copyText = document.getElementById("two").innerHTML;

       

        var input = document.createElement("input");

        input.value = copyText;

        document.body.appendChild(input);

        input.select();

        document.execCommand("copy");

        document.body.removeChild(input);

      }</script>

   

    <button onclick="copyClipboard()">copy</button>

    <p id="two">second</p>
Tags:

2

Answers


  1. 0

    The following will copy text to the clipboard – hope it helps.

    <html>
<head>
<script>

function copy_to_clipboard( elm_id ) {

    var text = document.getElementById( elm_id ).innerHTML;

    navigator.clipboard.writeText( text );

  }

</script>
</head>
<body>

   <button onclick="copy_to_clipboard('one')">copy first</button>

   <p id="one">first</p>

   <button onclick="copy_to_clipboard('two')">copy second</button>

   <p id="two">second</p>
</body>
</html>
    Login or Signup to reply.
  2. 0

    First, addEventListener should be preferred over the old inline event handler method. You could apply event delegation by listening for click events on the document (or the closest static ancestor of all the buttons you need to handle) and checking for a button that is followed by a paragraph element. navigator.clipboard.writeText can be used for simpler copying.

    The snippet below is a simple implementation of this idea. Note that it does not work here because of the Stack Snippets permissions policy.

    document.addEventListener('click', e => {
  if (e.target.matches('button') && e.target.nextElementSibling?.matches('p'))
    navigator.clipboard.writeText(e.target.nextElementSibling.textContent)
      .then(() => console.log('copied text'), error => console.error('failed to copy', error));
});
    <button>copy</button>
<p id="one">first</p>
<button>copy</button>
<p id="two">second</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search