在HTML中使用JS输入NewLine

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

像这样构建字符串x时，可以在每行末尾添加换行符（ \\n ）：

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

您应该在每个输入值后附加\\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 3

您可以在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

您可以使用\\n或HTML实体
将行分成文本区域


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

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

Answer 5

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