0

全部。我是 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>
4

2 回答 2

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.

这是一个工作示例。此外，正如Johnannes在他的回答和评论中指出的那样，可以直接更新 innerHTMLoutput.innerHTML += value;

于 2013-11-12T23:37:55.320 回答
0

这里有多个问题。

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>";    
}
于 2013-11-12T23:40:07.997 回答