How to copy contents of a button to clipboard (JS)

Question

I want to be able to copy the text of a button to the clipboard. I am able to retrieve the innerText of the button and log it to console but I am not able to add it to the selection and then ultimately add it to the clipboard with 'document.execCommand("copy");'. Any ideas?

$(document).ready(function() {
  $('button').on('click', function() {
    var copyText = this.innerText;
    console.log(copyText);
    copyText.select;
    document.execCommand("copy");
    /* Alert the copied text */
    alert("Copied the text: " + copyText);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <ul id="test">
    <li>
      <button class="copy-button" id="button1">Test1</button>
    </li>
    <li>
      <button class="copy-button" id="button2">Test2</button>
    </li>
    <li>
      <button class="copy-button" id="button3">Test3</button>
    </li>
  </ul>
</div>

Answer 1

Ok, insted of adding just a string to a clipboard, you must make this:

Create a textarea, add your stiring to the textarea, and copy it from there, and then delete the textarea.

Hope this helps:

function copyStringToClipboard () {
       var str = document.getElementById("btn1").innerText;
       // Create new element
       var el = document.createElement('textarea');
       // Set value (string to be copied)
       el.value = str;
       // Set non-editable to avoid focus and move outside of view
       el.setAttribute('readonly', '');
       el.style = {position: 'absolute', left: '-9999px'};
       document.body.appendChild(el);
       // Select text inside element
       el.select();
       // Copy text to clipboard
       document.execCommand('copy');
       // Remove temporary element
       document.body.removeChild(el);
    }

<button onclick="copyStringToClipboard()" id = 'btn1'>Click me</button>
<input type="text" placeholder="Paste here">

Answer 2

Basically, since you can't use button.select(), you want to create an element that you can select in order to copy to clipboard. So by creating a temporary input element with the same content as your button, you bypass that. You can now select the input element and simply copy it. You can test this by using "paste" directly after running the code.

In your HTML:

<button id='btnID'>Success</button>'

In your JS:

var input = document.createElement('input');
input.value = document.getElementById('btnID').innerHTML;
input.id = 'inputID';
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);