Введите NewLine с JS в HTML

Question

У меня есть 3 входа:

<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">

У меня есть кнопка, которая вызывает функцию:

<button onclick="myfunction()">click me</button>

Это JS-функция, которая вызывается, она получает значениевсе входные данные и отображает все значение в текстовой области:

function myfunction() {
  var x =
  "MyText1: " + document.getElementById("id-1").value +
  "MyText2: " + document.getElementById("id-2").value +
  "MyText3: " + document.getElementById("id-1").value;

  document.getElementById("mytext").innerHTML = x; }

В этой области функции отображают текст полей ввода:

<textarea id="mytext"></textarea>

Все идет нормально.Текстовое поле выглядит следующим образом:

"MyText1: input of id-1" "MyText2: input of id-2" "MyText3: input of id-3"

Я хочу получить следующий вывод:

    "MyText1: input of id-1"
    "MyText2: input of id-2"
    "MyText3: input of id-3"

Моя проблема в том, что когда я добавляю document.write("\n"); в скрипт, страницавылетает со следующим текстом консоли: Uncaught TypeError: Cannot read property 'value' of null.

Вот рабочая демоверсия без перевода строки: https://jsfiddle.net/6nw8jrk9/

Answer 1

Вы можете добавить символ новой строки (\n) в конец каждой строки при построении строки x, например, так:

var x =
    "MyText1: " + document.getElementById("id-1").value + '\n' +
    "MyText2: " + document.getElementById("id-2").value + '\n' +
    "MyText3: " + document.getElementById("id-1").value;

См. Рабочий пример ниже:

function myfunction() {
  var x =
    "MyText1: " + document.getElementById("id-1").value + '\n' +
    "MyText2: " + document.getElementById("id-2").value + '\n' +
    "MyText3: " + document.getElementById("id-1").value;

  document.getElementById("mytext").innerHTML = x;
}

<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">
<br />
<textarea id="mytext"></textarea>

<button onclick="myfunction()">click me</button>

Кроме того, вы можете использовать шаблонные литералы ES6 :

function myfunction() {
  var x =
`MyText1: ${ document.getElementById("id-1").value}
MyText2: ${document.getElementById("id-2").value}
MyText3: ${document.getElementById("id-1").value}`;
    
    document.getElementById("mytext").innerHTML = x;
}

<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">
<br />
<textarea id="mytext"></textarea>

<button onclick="myfunction()">click me</button>

Answer 2

Вы можете просто добавить разрывы строк к вашему var x

  var x =
  "MyText1: " + document.getElementById("id-1").value + '\n' +
  "MyText2: " + document.getElementById("id-2").value + '\n' +
  "MyText3: " + document.getElementById("id-1").value;

Answer 3

Вы должны добавлять \n после каждого входного значения.

<script>
  function myfunction() {
    var x =
    "MyText1: " + document.getElementById("id-1").value + '\n' +
    "MyText2: " + document.getElementById("id-2").value + '\n' +
    "MyText3: " + document.getElementById("id-1").value;

    document.getElementById("mytext").innerHTML = x; 
   }
</script>

Answer 4

использование document.getElementById("mytext").value = x;

например:

    <input type="text" id="id-1" value="aa" />
    <input type="text" id="id-2" value="bb" />
    <input type="text" id="id-3" value="cc" />

    <textarea id="mytext"></textarea>

    <button onclick="myfunction()">click me</button>

    <script>
      function myfunction() {
        var x =
          "MyText1: " +
          document.getElementById("id-1").value +
          "\nMyText2: " +
          document.getElementById("id-2").value +
          "\nMyText3: " +
          document.getElementById("id-3").value;

        document.getElementById("mytext").value = x;
      }
    </script>

Answer 5

Вы можете разбить строку на текстовую область с помощью \n или с правом HTML 


var x =
  "MyText1: " + "valueInput" + "\n" +
  "MyText2: " + "valueInput" + "
" +
  "MyText3: " + "valueInput";

  document.getElementById("mytext").innerHTML = x;

<textarea id="mytext"></textarea>