我是编程新手,正在尝试做我自己的 FizzBuzz 挑战,如下:
“编写一个程序,打印从 1 到 100 的数字。但是对于 3 的倍数,打印“Fizz”而不是数字;对于 5 的倍数,打印“Buzz”。对于同时是 3 和 5 的倍数的数字打印“FizzBuzz”。”
我正在 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 中的文本,而不是创建循环输出列表。
请问有人可以帮我吗?抱歉我是菜鸟,我正在努力学习。
谢谢。
最佳答案
使用.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>
关于javascript - 如何将 JavaScript 循环输出到页面上(而不是在控制台中)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55654220/