JavaScript doesn't copy innerHTML if text already entered

Question

I'm running the following code when a user clicks on a button to copy text from a series of paragraphs in a div into a text area input field. When the text area is empty, the code works correctly and pastes the paragraph text into the field. If I press the button again, it will repeat the function too, appending the paragraph text to the previously pasted text.

However, if I type anything manually into the text field and then click the button, it just doesn't work.

function copyDiv() {
  var x = document.getElementById('post-caption').getElementsByTagName('p');
  var i;
  var firstDivContent = x[0].innerHTML;
  for (i = 1; i < x.length; i++) {
    firstDivContent = firstDivContent + x[i].innerHTML;
  }
  var secondDivContent = document.getElementById('comment');
  firstDivContent = firstDivContent + " " + secondDivContent.innerHTML;
  secondDivContent.innerHTML = firstDivContent;
}

The corresponding HTML is as follows:

<div class="entry themeform" id="post-caption">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>
<input name="submit" type="submit" id="submit" class="submit" value="Send Feedback">
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">&nbsp;</textarea></p>
<input name="copy-text" id="copy-text" class="submit copy-text" value="Copy caption text" onClick="copyDiv();">

Any help is greatly appreciated.

Can you provide the corresponding HTML so we can actually run a test? It doesn't need to be the full HTML just a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Adam H, Oct 23 '18 at 21:24
@mats I appreciate the idea but putting it in a snippet would be more appropriate, so we don't need to rely on a 3rd party website. — Adam H, Oct 23 '18 at 21:26
This code doesn’t seem to read from or write to any textarea. If it’s ``, use `.value`, not `.innerHTML`. If it’s a `contenteditable` element, [edit] your post and clarify. See [JavaScript get TextArea input via `.value` or `.innerHTML`?](https://stackoverflow.com/q/5314186/4642212) and its linked questions. — Sebastian Simon, Oct 23 '18 at 21:39
Thanks @Xufox the .value instead of .innerHTML sorted the problem — FarhadD, Oct 23 '18 at 21:55

score 2 · Accepted Answer · answered Oct 23 '18 at 21:52

Textareas behave differently than divs when it comes to getting/setting their content. Instead of $textarea.innerHTML, you want $textarea.value. Check out this post JavaScript get TextArea input via .value or .innerHTML?

function copyDiv() {
  var x = document.getElementById('post-caption').getElementsByTagName('p');
  var i;
  var firstDivContent = x[0].innerHTML;
  for (i = 1; i < x.length; i++) {
    firstDivContent = firstDivContent + x[i].innerHTML;
  }
  var secondDivContent = document.getElementById('comment');
  var newContent = firstDivContent + " " + secondDivContent.value;
  secondDivContent.value = newContent;
}

<button onClick="copyDiv()">Copy</button>

<div id="post-caption">
  <p>this is the first</p>
  <p>this is the second</p>
  <p>this is the third</p>
</div>

<textarea id="comment">This is a comment</textarea>

To clarify, there are these three important kinds of elements you can set the content of: `
`s (and other “regular” elements) have `.innerHTML` to reflect their current content; `` have `.value` for their current content, but also `.innerHTML` to get/set their _initial_ content. And there’s `<input/>` (any text-like type) with the `.value` property for their current content and the `value` _attribute_ to get/set their _default_ content (using `setAttribute` or `getAttribute`). — Sebastian Simon, Oct 23 '18 at 22:02

Andy · Answer 2 · 2018-10-23T21:47:33.510

Use value rather than innerHTML to access the textarea.

(You could also use document.querySelectorAll('#post-caption p');)

const button = document.querySelector('button');
button.addEventListener('click', copyDiv, false);

function copyDiv() {
  var x = document.getElementById('post-caption').getElementsByTagName('p');
  var i;
  var firstDivContent = x[0].innerHTML;
  for (i = 1; i < x.length; i++) {
    firstDivContent = firstDivContent + x[i].innerHTML;
  }
  var secondDivContent = document.getElementById('comment');
  firstDivContent = firstDivContent + " " + secondDivContent.value;
  secondDivContent.value = firstDivContent;
}

<div id="post-caption">
  <p>Hallo</p>
  <p>Test</p>
  <p>This</p>
</div>
<textarea id="comment"></textarea>
<button>Click</button>

JavaScript doesn't copy innerHTML if text already entered

2 Answers2