Multiple copy to clipboard buttons - copy text from the button itself

Question

I'm trying to build something similar to a virtual keyboard for french special characters, so the user can copy them easy by clicking on the special character button and paste them wherever they need. I'm not very good in javascript and have been struggling with bits of code I found to create what I need. So far, I can make it work for just one button with this code.

For my html (just an excerpt)

<div class="copy_btn_container">
<div class="copy_btn_block">
    <p>Accents graves et accents aigüs<p>
    <button onclick="copyStringToClipboard()" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>

And my javascript is

function copyStringToClipboard () {
   var str = document.getElementById("accbtn1").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);
}

So I know that document.getElementById accepts only one element, so I tried document.getElementsByClassName but it return a "undefined" value. I'm open to other ways for the js too, as I saw that it was possible to use constants or such, but all of the example are designed to copy values from input fields, and for some reason I can't manage dont tweak them into working for copying the button's text.

Any help would be appreciated ! Thanks

Answer 1

You could pass the id or data attribute into your function like so:

function copyStringToClipboard (target) {
   var str = document.getElementById(target).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);
}

<div class="copy_btn_container">
<div class="copy_btn_block">
    <p>Accents graves et accents aigüs<p>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>