在 HTML 中绑定 JS 金字塔
我使用创建了一个金字塔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元素绑定，例如使用div如下：
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>
森林海2回答
-
慕雪6442864
目前，您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> -
湖上湖
const result = document.querySelector("#result");function generatePyramid(max = 5) { result.innerHTML = ""; const length = 2 * max - 1; for (let i = 1; i <= max; i++) { let s = "*".repeat(i).split("").join(" "); s = s.padStart( s.length + Math.floor((length - s.length) / 2) ).padEnd(length); const div = document.createElement("div"); div.innerHTML = s.replace(/\s/g, " "); result.appendChild(div); }}// generatePyramid(); // base 5 starsgeneratePyramid(11); // base 11 stars// generatePyramid(21); // base 21 stars<h1>Pyramid</h1><div id="result"></div>
随时随地看视频慕课网APP
相关分类
JavaScript