Enter NewLine with JS in HTML

Question

I have 3 inputs:

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

I have a button which calls a function:

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

This is the JS-function which gets called, it gets the value of all inputs and displays the whole value in a textarea:

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

This is the area where the functions shows the text of the input fields:

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

So far so good. The textarea looks like this:

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

What I want to achieve is the following output:

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

My problem is, when I add document.write("\\n"); to the script, the page crashs with following console text: Uncaught TypeError: Cannot read property 'value' of null .

Here a working demo without newline: https://jsfiddle.net/6nw8jrk9/

Answer 1

You can add a newline character ( \\n ) to the end of each line when you build your string x like so:

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

See working example below:

 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> 

Alternatively, you can use ES6's template literals :

 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

You should append \\n after each input value.

<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 3

You can just add line breaks to your 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 4

You can break a line into an textarea with \\n or with the HTML entitie 


 var x = "MyText1: " + "valueInput" + "\\n" + "MyText2: " + "valueInput" + "
" + "MyText3: " + "valueInput"; document.getElementById("mytext").innerHTML = x; 

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

Answer 5

use document.getElementById("mytext").value = x;

eg:

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