在HTML中绑定JS金字塔

debugcn 发表于 Dev

用户名

我使用创建了一个金字塔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 = '';
    }
}

很基本！但是我试图将结果与HTMLelement绑定，如下所示与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>

iota

目前，您要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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。