Javascript :: textarea中的新行

Question

在我的HTML文件中，我有以下代码片段：

<textarea class="form-control" id="textfield" rows="10"></textarea>

在我的Javascript文件中，我有这个：

    input1 = document.getElementById('input1').value;
    input2 = document.getElementById('input2').value;
    textfield = document.getElementById('textfield');

    if(document.getElementById('tmkbSelect').value == "option1") {
        document.getElementById('tmkb').innerHTML = "Tafel";
        for(input2i=0;input2i<20;input2i++){
            document.getElementById('textfield').value = input1+" "+"*"+" "+input2i+" "+"="+" "+input1*input2i;
        }
    }

我基本上试图创建一个乘法表。 它有效但不完全。

javascript代码在一个函数中，我使用一个按钮调用该函数，但问题是输出是这样的：

3 * 19 = 57

我希望它是：

3 * 1 = 3
3 * 2 = 6
3 * 3 = 9

等等，我该怎么做？ 我只需要使用Javascript就可以做到这一点。

Answer 1

您需要连接字符串，然后将它们放在textarea中。

您可以将字符串添加到数组中，然后在循环之后将它们连接起来并将它们放在textarea中：

var lines = [];
for(input2i=0;input2i<20;input2i++){
  lines.push(input1+" "+"*"+" "+input2i+" "+"="+" "+input1*input2i);
}
document.getElementById('textfield').value = lines.join('\n');

Answer 2

使用ShortHand运算符将内容添加到textarea。

document.getElementById("test").value += "\n 1";

演示

Answer 3

在循环中，您分配值：

... .value = input1+...

这意味着您每次都会覆盖内容。 你需要追加：

var content = '';
...
content += input1+...
...
document.getElementById('textfield').value = content;

注意+= 。

不要忘记在每一行后添加'\\n' ，否则一切都会在一行中。