JavaScript 循环输出答案

【问题标题】：JavaScript Loop OutputJavaScript 循环输出
【发布时间】：2013-11-12 23:34:58
【问题描述】：

所有。我是 JavaScript 新手，所以希望这对大家来说是一个非常简单的问题。但我绝对，为了我的一生，无法弄清楚如何做到这一点！我正在创建一个时间表程序，我需要输出如下所示：

5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
...

...等等。但是，每当它输出到屏幕时，它只显示循环的最后一个输出。所以它将显示“5 x 12 = 60”。每次程序通过循环时，我都需要它来显示每个单独的输出。我该怎么做呢？

提前非常感谢！

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">

        <!-- 
        Input
            User clicks the "Compute Table" button.
        Processing
            The computer creates a times table based on the users' input.
        Output
            Outputs the table to the user.
        -->


<title>Times Table</title>
<script>
    function computeTable() {

    // Declaring some variables and pulling the integer from the HTML form. Nothing to see here.
    var integer = parseInt(document.getElementById('input').value);
    var i = 1;

    // Running the loop and doing all the arithmetic
    while (i < 12) {
        i++;
    }

    // This line displays the output to the user
    var output = document.getElementById('outputdiv');
    output.innerHTML = integer + " x " + i + " = " + (integer * i);
    }
</script>
</head>

<body>
<h1>Times Table</h1>

Please enter a positive integer: <input type="text" id="input">
<button type="button" onclick="computeTable()">Compute Table</button>
<hr>
<div id="outputdiv" style="font-weight:bold"></div>
</body>
</html>

【问题讨论】：

标签： javascript loops screen output

【解决方案1】：

每次变量递增时，您都需要更新 div。

var output = document.getElementById('outputdiv');
while (i < 12) {
    output.innerHTML = integer + " x " + i + " = " + (integer * i);
    i++;
}

虽然我认为它会很快更新您的结果，并且您可能无法看到每个结果。也许你想要这样的东西？

var output = document.getElementById('outputdiv');
var html;
if (output.innerHTML.length != 0) {
    output.innerHTML = "";
}
while (i < 12) {
    html = output.innerHTML;
    html += (i > 1 ? ", " : "") + integer + " x " + i + " = " + (integer * i);
    output.innerHTML = html;
    i++;
}

这应该会给你类似result_1, result_2, result_3, //etc.

Here is a working example。此外，正如 Johnannes 在他的回答和评论中指出的那样，可以直接更新 innerHTML output.innerHTML += value;

【讨论】：

您可以直接附加到innerHTML，而不是读取innerHTML，附加到它并写回 - 请参阅我的答案。
@JohannesH。我同意，更有效的是，我明确地写了它以更好地说明该技术。

【解决方案2】：

这里有多个问题。

1) 你只输出一次 - 所以无论你做什么，只有一行。听起来很合理，对吧？

2) 即使您确实输出了多次，output.innerHTML = "..." 也会覆盖之前的任何分配。因为这是一个分配，它不会追加。

所以解决方案是在循环中追加：

var i = 1;
while ( i < 12 ) {
    output.innerHTML += integer + " x " + i + " = " + (integer * i) + "<br>";
    i++;
}

这可以使用for 循环以更短的方式完成：

for (var i = 1 ; i < 12 ; i++) {
    output.innerHTML += integer + " x " + i + " = " + (integer * i) + "<br>";    
}

【讨论】：

谢谢，谢谢，谢谢！我不知道这是这么简单的事情！我会继续工作。总有一天我会像你们一样擅长编程！
这只是一个练习问题，所以我相信你会变得更好 :D