JavaScript 如果文本已输入，则不会复制 innerHTML

Question

我是运行以下代码，当用户单击按钮将 div 中的一系列段落中的文本复制到文本区域输入字段中时。当文本区域为空时，代码可以正常工作并将段落文本粘贴到该字段中。如果我再次按下按钮，它也会重复该功能，将段落文本附加到之前粘贴的文本中。

但是，如果我在文本字段中手动输入任何内容然后单击按钮，它就不起作用。

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;
}

对应的HTML如下：

<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();">

非常感谢任何帮助。

Answer 1

使用 value 而不是 innerHTML 访问 textarea。

（您也可以使用 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>

Answer 2

文本区域在 getting/setting 内容方面与 div 不同。而不是 $textarea.innerHTML，你想要 $textarea.value。看看这个 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>

JavaScript 如果文本已输入，则不会复制 innerHTML

JavaScript doesn't copy innerHTML if text already entered

html

javascript

innerhtml