gpt4 book ai didi

javascript - 在 HTML 中绑定(bind) JS 金字塔

转载 作者:行者123 更新时间:2023-12-01 15:23:55 31 4
gpt4 key购买 nike

我使用 JavaScript 创建了一个金字塔以下是我迄今为止使用 for 循环尝试的代码:

function showPyramid() {
var rows = 5;
var output = '';

for (var i = 1; i <= rows; i++) { //Outer loop
for (var j = 1; j <= i; j++) { //Inner loop
output += '* ';
}

console.log(output);
document.getElementById('result').innerHTML = output;
output = '';
}
}
很基础!但我试图将结果与 HTML 绑定(bind)元素,例如 如下:
document.getElementById('result').innerHTML = output;
相反,它连续显示五颗星,而不是在控制台中看到的 JS 格式。我在这里缺少什么吗?
完整代码 :

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pyramid</title>
<script>
function showPyramid() {
var rows = 5;
var output = '';

for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= i; j++) {
output += '* ';
}

console.log(output);
document.getElementById('result').innerHTML = output;
output = '';
}
}
</script>
</head>

<body onload="showPyramid();">
<h1>Pyramid</h1>
<div id="result"></div>
</body>

最佳答案

目前,您正在重置 innerHTML在每次循环迭代结束时;要么使用+=附加 HTML 或先将所有输出附加在一起,然后设置 innerHTML .此外,您需要使用 <br>HTML 中创建换行符的标记.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pyramid</title>
<script>
function showPyramid() {
var rows = 5;
var output = '';

for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= i; j++) {
output += '* ';
}
output += "<br/>";
}
document.getElementById('result').innerHTML += output;
}
</script>
</head>
<body onload="showPyramid();">
<h1>Pyramid</h1>
<div id = "result"></div>
</body>
</html>

关于javascript - 在 HTML 中绑定(bind) JS 金字塔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62623454/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com