2

I want to copy the text from a button when I click on it. I reused code from w3 schools. The difference with the w3 schools code is that when you click on a button it copy the text from an input, I want to copy the text from the button I'm clicking on.

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  document.execCommand("copy");
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>

When I console.log copyText it display the text from the button but my text is never copied.

Do you know why ?

cнŝdk
  • 31,391
  • 7
  • 56
  • 78
Nicolas Twil
  • 65
  • 6
  • 1
    document.getElementById('myButton').innerText – Amit Baranes May 22 '19 at 13:41
  • 5
    Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) – Mike G May 22 '19 at 13:42
  • @mikeTheLiar it works if when I click on a button and it copy the text from an input, but in my case I want to copy the text from the same button I'm clicking on. – Nicolas Twil May 22 '19 at 13:43
  • innerText not innerHtml – Amit Baranes May 22 '19 at 13:44
  • 1
    Top answer over there says "Don't expect clipboard related commands to work whilst you are testing code in the console. " Do you have the dev console open? – Mike G May 22 '19 at 13:44
  • 3
    You assign the text of your button to a variable and then execute the copy command, but you haven't selected any text. You're missing that important part from the example you linked to. E.g. `copyText.select();` – j08691 May 22 '19 at 13:44
  • It also says "`document.queryCommandEnabled('copy')` return true if the `document.execCommand('copy')` will succeed if called now." What does that method return when executed in this method? – Mike G May 22 '19 at 13:46
  • @j08691 when I add ```copyText.select();``` it display this error : ```copyText.select is not a function``` – Nicolas Twil May 22 '19 at 13:50
  • `.select()` works for input elements like on the site you linked to, not on button html/text. My point is that you need to select the text you want copied. You aren't doing that. – j08691 May 22 '19 at 13:51
  • @MikeTheLiar when I console.log document.execCommand('copy') it returns true and undefined. – Nicolas Twil May 22 '19 at 13:58

3 Answers3

3

Your problem is that you are only storing the value of the button, but you are selecting nothing, so nothing will be copied to clipboard.

You need to put that content in an input and select its value using .select(), so it can be copied:

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  
  var input = document.createElement("input");
  input.value = copyText;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input); 
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>
cнŝdk
  • 31,391
  • 7
  • 56
  • 78
  • My bad I console.log inside my script and it display : `````` ; then if I console.log input.select() it display : ```undefined``` – Nicolas Twil May 22 '19 at 14:03
  • 1
    @NicolasTwil Check my edited code, it works if you click the button, then paste the text some where. – cнŝdk May 22 '19 at 14:05
0

I use your example, and add the function to use several bottons, like this, is working =)

<script>
 function copyClipboard(target) {
    var copyText = document.getElementById(target).innerHTML;
    //document.execCommand("copy"); --> is obsolet
    navigator.clipboard.writeText(copyText);
          }

<button onclick="copyClipboard(getAttribute('id'))" id="xxxx">123</button>
code xxii
  • 1
  • 3
-1
function copyClipboard() {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(document.getElementById("myButton").innerHTML).select();
    document.execCommand("copy");
    $temp.remove();
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>
Abbuchu
  • 1
  • 2