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