I am looking for a solution how to copy text and then paste a new text automatic in textarea. I found solutions, but based on jquery I'm looking for something simple on clean js.

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);
  
let textarea = document.getElementById("select-this");
  textarea.focus();
}

<div class="wrapper">
  <p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br/><br/>
  
  <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>

I am looking for a solution how to copy text and then paste a new text automatic in textarea. I found solutions, but based on jquery I'm looking for something simple on clean js.

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);
  
let textarea = document.getElementById("select-this");
  textarea.focus();
}

<div class="wrapper">
  <p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br/><br/>
  
  <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>

I found some solutions, but I still do not know how to make the text automatically appear in textarea after pressing the button.

• javascript
• html

• 1 um just change the value of textarea at end of copyToClipboard? textarea.value = document.getElementById(elementId).innerHTML; – Chris Li Commented Sep 8, 2018 at 19:26
• it works ! but not as I wanted, because after pressing a different button everything is deleted (overwrites) I am looking for a solution, so that after pressing the new texts from the button will stick in sequence: 'P1: I am paragraph 1 P2: I am a second paragraph P3: I am a 3 paragraph "- to make something like that after press all button – k.drm Commented Sep 8, 2018 at 19:40
• ok thats a simple fix, ill post an answer – Chris Li Commented Sep 8, 2018 at 19:42

3 Answers 3

append the copied value to value of textarea everytime you run copyToClipboard

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

  let textarea = document.getElementById("select-this");
  textarea.focus();
  textarea.value += document.getElementById(elementId).innerHTML
}

<div class="wrapper">
  <p id="p1">P1: I am paragraph 1</p>
  <p id="p2">P2: I am a second paragraph</p>
  <p id="p3">P3: I am a 3 paragraph</p>
  <button onclick="copyToClipboard('p1')">Copy P1</button>
  <button onclick="copyToClipboard('p2')">Copy P2</button>
  <button onclick="copyToClipboard('p3')">Copy P3</button>
  <br/><br/>

  <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>

ummm...You are REALLY over-plicating stuff...

Just use the following JS:

let textarea = document.getElementById("select-this");
textarea.focus();

function changeTextarea(elementId) {
  textarea.innerHTML = document.body.querySelector(elementId).innerHTML;
}

and edit the HTML of the buttons as follows:

<button onclick="changeTextarea('#p1')">Copy P1</button>
<button onclick="changeTextarea('#p2')">Copy P2</button>
<button onclick="changeTextarea('#p3')">Copy P3</button>

You don't need to copy and then paste the values of the paragraphs to the <textarea>. Just change it using the innerHTML property...

I've a simple solution for that, just using the part of the code you have.

function copyToClipboard(elementId) {
  var text = document.getElementById(elementId).innerHTML;
  let textarea = document.getElementById("select-this");
  textarea.innerHTML = text;
  textarea.focus();
}

 <p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br><br>
  <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>