Copying contents of h1 element to clipboard?

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!';
  }

JavaScript
​x
 
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>

JavaScript
 
<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>

Answer

To copy text you could use:

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

JavaScript
 
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!';
  }

JavaScript
 
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>

JavaScript
 
<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

Advertisement

Answer