CODEWITHSUNDEEP
javascriptjqueryhtmlcssstring
user8891469
user8891469

Reputation:

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

Upvotes: 2

Views: 4040

Answers (2)

Mukyuu
Mukyuu

Reputation: 6769

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

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44135

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>

Upvotes: 11

Related Questions