Как заполнить textarea информацией из javascript переменнной

364

19 октября 2017, 12:31

Есть такая необходимость передать переменную в textarea по нажатию кнопки.

Вводные данные:

<script>
  var insta = "<?php echo $instapost; ?>";
  function addinsta() {
    document.getElementById("txtpost").innerHTML = insta;
  }
</script>

Переменная insta успешно получает многострочный текст из php-переменной $instapost.Далее необходимо, по нажатию button заполнить <textarea> полученной переменной.

Собственно, что имеем:

<button id="instabutton" onclick="addinsta()">Generate Post</button><br />
<textarea id="txtpost" name="txtpost"></textarea>

Как только не пробовал: document.getElementById("txtpost").value = insta - тоже не работает.

Что я делаю не так?

Answer 1

Хорошим простым решением будет сделать так:

<script>
  var insta = <?php echo json_encode($instapost); ?>;
  function addinsta() {
    document.getElementById("txtpost").value = insta;
  }
</script>

Кстати, слеш экранируется, так что проблемы со </script> в строке не возникнет.

Answer 2

Вставьте "\" в конце каждой строки:

var insta = "Какое то имя\n\ 
Модель открытой базы данных украинских детей-моделей 'Kids Models'\n\ 
 лет. , Украина\n\ 
\n\ 
\n\ 
Опыт работы:  года\n\ 
\n\ 
\n\ 
Награды: \n\ 
\n\ 
Анкету модели, а так же полный каталог моделей можно найти на портале Kids Models. Ссылка в профиле.\n\ 
\n\ 
#kmdb, #kidsmodels, #kidsmodelsua, #backstage, #model, #topmodel, #photomodel, #kidmodel, #fashion, #fashionkids, #casting, #tfp, #кастинг, #модель, #детимодели, #мальчикимодели, #детскаямода, #фотосессия"; 
 
function addinsta() { 
  document.getElementById("txtpost").innerHTML = insta; 
}

<button type="button" id="instabutton" style="width: 270px;" onclick="addinsta()">Generate Instagram Post</button><br /> 
<div id="extra"> 
<textarea id="txtpost" name="txtpost"></textarea> 
</div>

Answer 3

Проблема решилась следующей конструкцией:

<script>
  var insta = `<?php echo $instapost; ?>`;
  function addinsta() {
    document.getElementById("txtpost").innerHTML = insta;
  };
</script>

Что бы не расставлять "\" в конце каждой строки - php-переменную обрамил в обратные кавычки ``, согласно стандарту ES-2015 (в них разрешен перевод строк). Все заработало!