<html>
<head>
<title>JavaScript</title>
<style>
</style>
</head>
<body> Source Text
<br>
<textarea name="copyTxt" rows="3" cols="50">Hello World</textarea><br>
<button class="moverBtn">Move Text</button>
<button class="copyBtn">Copy Text</button>
<br>
<textarea name="finalTxt" rows="3" cols="50"></textarea>
<div class="output"></div>
<script>
const copyTxt = document.querySelector("textarea[name=copyTxt]");
const finalTxt = document.querySelector("textarea[name=finalTxt]");
const moverBtn = document.querySelector(".moverBtn");
const copyBtn = document.querySelector(".copyBtn");
const output = document.querySelector(".output");
moverBtn.addEventListener("click", moveText);
copyBtn.addEventListener("click", copyText);
finalTxt.addEventListener("click", selAll);
copyTxt.addEventListener("click", selAll);
function selAll() {
this.select();
}
function copyText() {
let temp = copyTxt.value;
copytoClipBoard(temp);
}
function copytoClipBoard(str) {
const textarea = document.createElement("textarea");
textarea.value = str;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
output.innerHTML = "<h3>Copied content</h3>" + textarea.value;
console.log(textarea);
}
function moveText() {
let temp = copyTxt.value;
finalTxt.value = temp;
}
</script>
</body>
</html>