如何在html textarea中打印javascript while循环结果？答案

【问题标题】：How to print javascript while loop result in html textarea?如何在html textarea中打印javascript while循环结果？
【发布时间】：2019-07-17 09:33:23
【问题描述】：

当输入为 2 时打印 '2 x 10 = 20' 但不是整个表。我尝试了各种方法。但结果是一样的。

没有错误。就像打印整个乘法表一样。

function loop() {
  var i = 1;
  var x = document.getElementById("num").value;

  //document.getElementById("result").value = result;

  while (i <= 10) {

    document.getElementById("result").value = x + " x " + i + " = " + i * x;
    i++;
  }
}

<h1>While loop: </h1>
<p>The while loop keeps repeating an action until an associated condition returns false.</p>
<img src="images/loop.jpg" /><br/>
<img src="images/loop2.jpg" /><br/>

<body>
  <p>JavaScripts Runs:</p>
  <script src="while_1loop.js">
  </script><br/> What number table would you like to have?<input type="number" name="" id="num" /><br>
  <button type="button" onclick="loop()" ;>Start</button><br>
  <textarea rows="12" cols="15" id="result" readonly>
       
              </textarea><br/>

【问题讨论】：

朋友们，我看到的循环函数来自于源码while_2loop.js。 :)
document.getElementById("result").value += x + " x " + i + " = " + (i * x)+"\n";
这个问题是由无法再复制的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。这通常可以通过在发布之前确定并仔细检查重现问题所需的最短程序来避免。
For loop overwriting text in HTML的可能重复
当然，但这仍然是一个骗局，如果这是一个问题，他们可以查看Javascript: filling inputs with text without overwriting the text that is already there

标签： javascript

【解决方案1】：

你总是在改变'result'的值而不是增加它：

function loop() {
  var i = 1;
  var x = document.getElementById("num").value;

  //document.getElementById("result").value = result;

  while (i <= 10) {

    var result = document.getElementById("result");
    var sum = document.createTextNode(x + " x " + i + " = " + i * x + "\n");

    result.appendChild(sum);
    i++;
  }
}

<h1>While loop: </h1>
<p>The while loop keeps repeating an action until an associated condition returns false.</p>
<img src="images/loop.jpg" /><br/>
<img src="images/loop2.jpg" /><br/>

<body>
  <p>JavaScripts Runs:</p>
  <script src="while_1loop.js">
  </script><br/> What number table would you like to have?<input type="number" name="" id="num" /><br>
  <button type="button" onclick="loop()" ;>Start</button><br>
  <textarea rows="12" cols="15" id="result" readonly>
       
              </textarea><br/>

【讨论】：

已在评论中回答。请投票关闭 - 至少缓存段落而不是将其放在循环中
添加评论时，它会显示“避免在 cmets 中回答问题”——您应该添加一个答案。无论如何，当我开始写答案时，评论并不存在。我也在解决这个人的问题，而不是优化它！
我在评论中回答了因为问题需要删除。然后我投票选择错字删除。不能用赞成的答案删除它
@mplungjan 那太愚蠢了，作为一个黄金 javascript 徽章持有者，你应该把它当作几个骗子之一来敲打它
我现在明白了。我希望 op 删除

【解决方案2】：

如果我明白你的意思，

你用这段代码重写整个文本区域：

document.getElementById("result").value = x + " x " + i + " = " + i * x;

但您需要在旧结果之后添加新结果。像这样的：

var oldValue = document.getElementById("result").value;
var result = x + " x " + i + " = " + i * x;
document.getElementById("result").value = oldValue + '\n' + result;

【讨论】：