CODEWITHSUNDEEP
javascripthtmlinnerhtml
FarhadD
FarhadD

Reputation: 495

JavaScript doesn't copy innerHTML if text already entered

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.

Upvotes: 1

Views: 979

Answers (2)

colefner
colefner

Reputation: 1841

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>

Upvotes: 2

Andy
Andy

Reputation: 63524

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>

Upvotes: 1

Related Questions