Hey everyone, I created a translator but it's not perfect. However, it's functional and now I'm looking to enhance it by adding a feature that allows users to copy the result. Is there a way to achieve this? Below is the code snippet I'm working with. Thank you in advance for any help! I know copying text from inputs is possible, but I'm unsure if the same 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 translated text will appear here!</h1>
<button style="width: 100px; display: inline;" id="copyer" onclick="copy();">Copy To Clipboard!</button>
<br>
<br>
</body>
</html>