JavaScript не копирует innerHTML, если текст уже введен - PullRequest
Новая
       8

JavaScript не копирует innerHTML, если текст уже введен

0 голосов
/ 24 октября 2018

Я запускаю следующий код, когда пользователь нажимает кнопку, чтобы скопировать текст из серии абзацев в 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();">

Любая помощь очень ценится.

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Textareas ведут себя не так, как div, когда дело доходит до получения / настройки их контента.Вместо $textarea.innerHTML вы хотите $textarea.value.Проверьте этот пост JavaScript получить ввод TextArea через .value или .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>
0 голосов
/ 24 октября 2018

Используйте 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>
...