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

您应该在每个输入值后附加\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" + "&#13;&#10;" +
  "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>

在HTML中使用JS输入NewLine

5 个答案: