在 HTML 中绑定 JS 金字塔

use*_*043 5 html javascript

我创建了一个金字塔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 = '';
    }
}
Run Code Online (Sandbox Code Playgroud)

很基本!但我试图用HTML元素绑定结果,用div说如下:

document.getElementById('result').innerHTML = output;
Run Code Online (Sandbox Code Playgroud)

相反,它连续显示五颗星,而不是在控制台中看到的 JS 格式。我在这里缺少什么吗?

完整代码

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 = '';
    }
}
Run Code Online (Sandbox Code Playgroud)

hev*_*ev1 2

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>
Run Code Online (Sandbox Code Playgroud)