Copying contents of h1 element to clipboard?

Question

So, I made a translator, and it isn't very good. But anyway, it is working and I want to try and add something where you can copy the result. Is there a way to do this? Below is my code: Thanks in advance! I know there is a way to do this with inputs, but I'm not sure if it can be done with headings.

var myText;
var letters;
var letterslength;
var result;
var firstletter;
var newresult;
var vowels = ['a', "e", "i", "o", "u"]
 function GO(){
  myText=document.getElementById('inputBox').value;
  letters=myText.split("");
  //console.log(letters);
  letterslength=letters.length;
               
       if(vowels.includes(letters[0])){
               letters = letters.join('');
               result=letters+'yay';
               document.getElementById('changetext').innerHTML=result;
               history.push(result);
       } else{
               firstletter=letters[0]
               letters.shift();
               letters = letters.join('');
               result=letters+firstletter;
               newresult=result+"ay";
               document.getElementById('changetext').innerHTML=newresult;
       }
  }
                    
                    
  function copy(){
        var copyText = document.getElementById("changetext");
        copyText.select();
        document.execCommand("copy");
        document.getElementById('copyer').innerHTML="Copied"+copyText.value;
        setTimeout(revert, 3000);
  }
  function revert(){
      document.getElementById('copyer').innerHTML= 'Copy To Clipboard!';
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <DOCTYPE html>
        <html>
        <head>
        <title>Pig Latin Translator!</title>
            <link href="style.css" rel="stylesheet">
        </head>
            <body>
                <br>
            <h1>Pig Latin Translator</h1>
                <p>You are on the island of Pig Land. You must learn the difficult language of Pig Latin. Lucky for you, you can use this website to help you survive. One word at a time please.</p>
                <br>
                <br>
                <input id="inputBox" placeholder="Type your English Here...">
                <br>
                <br>
                <br>
                <button onclick="GO();">Translate!</button>
                <br>
                
               <h1 id="changetext">...and the text will appear here!</h1>
                
                <button style="width: 100px; display: inline;" id="copyer" onclick="copy();">Copy To Clipboard!</button>
                <br>
                <br>
               
            </body>
        </html>

helpful link: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript?page=1&tab=active#tab-top — Viet, Dec 14 '18 at 04:05
check this [clipboard API](https://www.chromestatus.com/feature/5861289330999296) . available within browser — xkeshav, Dec 14 '18 at 04:22

score 11 · Answer 1 · answered Dec 14 '18 at 04:20

Here's a function that copies text from an element:

function copyElementText(id) {
    var text = document.getElementById(id).innerText;
    var elem = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

Just call it on your heading like so:

copyElementText("changeText");

And it will work!

Demonstration snippet:

function copyElementText(id) {
    var text = document.getElementById(id).innerText;
    var elem = document.createElement("textarea");
    document.body.appendChild(elem);
    elem.value = text;
    elem.select();
    document.execCommand("copy");
    document.body.removeChild(elem);
}

<button onclick="copyElementText('heading')">Click Me!</button>
<h1 id="heading">Text to be Copied</h1>

Mukyuu · Accepted Answer · 2018-12-14T04:36:54.200

To copy text you could use:

var temp = document.createElement("textarea");
document.body.appendChild(temp);
temp.value= copyText.innerText
temp.select();
document.execCommand("copy");

Replaced: document.getElementById('copyer').innerHTML="Copied"+copyText.value; into document.getElementById('copyer').innerText="Copied "+temp.value;

temp.value is temporary data to copied to clipboard. After you're done using temporary data don't forget to remove temporary data by: document.body.removeChild(temp);

Check the following fiddle:

var myText;
var letters;
var letterslength;
var result;
var firstletter;
var newresult;
var vowels = ['a', "e", "i", "o", "u"]
 function GO(){
  myText=document.getElementById('inputBox').value;
  letters=myText.split("");
  //console.log(letters);
  letterslength=letters.length;
               
       if(vowels.includes(letters[0])){
               letters = letters.join('');
               result=letters+'yay';
               document.getElementById('changetext').innerHTML=result;
               history.push(result);
       } else{
               firstletter=letters[0]
               letters.shift();
               letters = letters.join('');
               result=letters+firstletter;
               newresult=result+"ay";
               document.getElementById('changetext').innerHTML=newresult;
       }
  }
                    
                    
  function copy(){
        var copyText = document.getElementById("changetext");
        var temp = document.createElement("textarea");
        document.body.appendChild(temp);
        temp.value= copyText.innerText
        temp.select();
        document.execCommand("copy");
        document.getElementById('copyer').innerText="Copied "+temp.value;
        document.body.removeChild(temp);  
        setTimeout(revert, 3000);
  }
  function revert(){
      document.getElementById('copyer').innerHTML= 'Copy To Clipboard!';
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <DOCTYPE html>
        <html>
        <head>
        <title>Pig Latin Translator!</title>
            <link href="style.css" rel="stylesheet">
        </head>
            <body>
                <br>
            <h1>Pig Latin Translator</h1>
                <p>You are on the island of Pig Land. You must learn the difficult language of Pig Latin. Lucky for you, you can use this website to help you survive. One word at a time please.</p>
                <br>
                <br>
                <input id="inputBox" placeholder="Type your English Here...">
                <br>
                <br>
                <br>
                <button onclick="GO();">Translate!</button>
                <br>
                
               <h1 id="changetext">...and the text will appear here!</h1>
                
                <button style="width: 100px; display: inline;" id="copyer" onclick="copy()">Copy To Clipboard!</button>
                <br>
                <br>
               
            </body>
        </html>

You could explore more about How do I copy to the clipboard in JavaScript? in here

Copying contents of h1 element to clipboard?

2 Answers2

Linked