javascript - 如何将 JavaScript 循环输出到页面上（而不是在控制台中）？

Question

我是编程新手，正在尝试自己的 FizzBu​​zz 挑战，具体如下：

“编写一个程序，打印从 1 到 100 的数字。但是对于三的倍数打印“Fizz”而不是数字，对于五的倍数打印“Buzz”。对于同时是三和五的倍数的数字，打印“FizzBu​​zz” ”。”

我是在 Javascript 和 jQuery 中做的，我可以让它在控制台中打印，但我如何修改它以便它实际打印到页面本身上？比如可能使用 HTML 来帮助输出列表/数组或其他东西，这样你就可以看到控制台、页面上的内容，如果我说得通的话？

目前我已经通过这样做在控制台中工作：

for (var i=1; i < 101; i++){
    if (i % 15 == 0) console.log("FizzBuzz");
    else if (i % 3 == 0) console.log("Fizz");
    else if (i % 5 == 0) console.log("Buzz");
    else console.log(i);
}

然后我把它改成这样：

<p id="fizzbuzz"></p>

for (var i=1; i < 101; i++){
    if (i % 15 == 0) {
      $('#fizzbuzz').html("FizzBuzz");
    }
    else if (i % 3 == 0) {
      $('#fizzbuzz').html("Fizz");
    }
    else if (i % 5 == 0) {
      $('#fizzbuzz').html("Buzz");
    }
    else console.log(i);
}

但这显然只是打印出一行，因为它正在替换'fizzbuzz'ID 中的文本，而不是创建循环输出列表。

任何人都可以帮助我吗？对不起，我是菜鸟，我正在努力学习。

谢谢。

标签： javascriptjqueryhtml

Answer 1

使用.append()而不是.html()为了插入指定的内容作为选定元素的最后一个子元素

for (var i=1; i < 101; i++){
    if (i % 15 == 0) {
      $('#fizzbuzz').append("FizzBuzz<br/>");
    }
    else if (i % 3 == 0) {
      $('#fizzbuzz').append("Fizz<br/>");
    }
    else if (i % 5 == 0) {
      $('#fizzbuzz').append("Buzz<br/>");
    }
    else console.log(i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fizzbuzz"></p>