How to create copy button using html and javascript?

Question

Hii am new to javascript but by putting my all efforts I have written a javascript to copy text inside a <p></p> elements. In my website I need the copy button many times. But my javascript work for only one copy button. if I used it to another copy button it would copy the first button's respective <p>/p> text. My javascript

const copyButton = document.querySelector('.copyButton');
const copyalert = document.querySelector('.copyalert');

copyButton.addEventListener('click', copyClipboard);

function copyClipboard() {
  var copystatus= document.getElementById("randomstatus");
// for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(copystatus);
    range.select();
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
  else if(window.getSelection) {
// other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(copystatus);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
}

My html

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">
       <p class=latest>life os good when hou have books</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
</div>
<div class="latestquotes">
       <p class=latest>Google is a open source library</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
<div class="latestquotes">
       <p class=latest>Cat is better than dog</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
  </div>
  </div>

A different approach: navigator.clipboard.writeText(newClipText) NOTE: check browser compatibility — Ragul CS, Dec 28 '20 at 07:05

Ken Lee · Accepted Answer · 2020-12-28T05:59:32.880

You just need to let the system knows the id of the text you want to copy , e.g. p1, p2, p3.

Please try this

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">

       <p><div id=p1>life os good when hou have books</div></p> 
       <button class="copyButton btn" onclick="copyToClipboard('p1')">Copy</button>

</div>

 

<div class="latestquotes">

       <p><div id=p2>Google is a open source library</div></p>
       <button class="copyButton btn" onclick="copyToClipboard('p2')">Copy</button>

   </div>

 

<div class="latestquotes">

       <p><div id=p3>Cat is better than dog</div></p>
       <button class="copyButton btn" onclick="copyToClipboard('p3')">Copy</button>

   </div>
  </div>
  </div>


<script>


function copyToClipboard(var1){
    let val = document.getElementById(var1).innerHTML;
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    alert('text copied to clipboard, please use Ctrl-V to paste the data');

  }  


</script>

No problem. I have already revised my answer - not using jquery. Please try again. — Ken Lee, Dec 28 '20 at 06:14
works for me, I had to change .innerHTML to value for element with input tag — kztd, Mar 05 '22 at 03:45

score 2 · Answer 2 · answered Dec 28 '20 at 05:10

2

You have to create a text area, append to body and apply execCommand function, then you can remove the textarea from your DOM, try this:

function copyToClipboard(){
    let val = 'text to copy';
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    alert('text copied to clipboard');
  }

<button type=button onclick="copyToClipboard()">Copy</button>

answered Dec 28 '20 at 05:10

sonEtLumiere

4,461
3
8
35

No, it doesn't work. it copies "text to copy" word if I click any button. – Dec 28 '20 at 05:49
you can pass an argument to function copyToClipboard(argument){let val = argument} – sonEtLumiere Dec 28 '20 at 05:50
Although I got answer, but I can't understand your code. – Dec 28 '20 at 06:46
If you will to understand more about it, it's quite similar to the code [shown here](https://stackoverflow.com/a/30810322/5675325) from Dean Taylor. – Tiago Martins Peres Oct 21 '22 at 10:41

score 1 · Answer 3 · answered Feb 09 '23 at 19:38

Since document.execCommand('copy') is deprecated, you can use navigator.clipboard.writeText, just need to check for browser compatibility, like Ragul CS said. For more information, check this question.

copyButton.addEventListener("click", async function () {
    const code = 'text to copy';
    await navigator.clipboard.writeText(code);
});

score 0 · Answer 4 · answered Jul 04 '23 at 13:34

0

use this

<button @click="copyMe('Copied')">Copy Your Code</button>

'''''

function copyMe(){
  navigator.clipboard.writeText("Copy Clipboard");
}

'''''''

answered Jul 04 '23 at 13:34

Mohammad Nadr

111
1
4

How to create copy button using html and javascript?

4 Answers4