How can I print a function from JavaScript to html-CodePudding

I'm trying to make a out of '*' and I got the code right because it works in the console but when I try to print it in the html document it does not work

function Pyramid() {
    let rows = 9;
    let output = '';
    for (let i = 1; i <= rows; i  ) {
        for (let j = 1; j <= i; j  ) {
            output  = '*  ';
        }
        console.log(output);
        return output;
        output = '';
    }
}
document.getElementById('pyramid').textContent = generatePyramid();

<body>
    <div id="pyramid"></div>
    <script src="../script.js/script.js"></script>
</body>

CodePudding user response：

Okay, so there are a few minor issues here.

Your function is called Pyramid but you are calling generatePyramid.
You are returning at the end of the first row because return output is within the for loop.
In the console you are outputting using console.log which will give you a row in the console... however for the HTML you are just dumping it all so it would be a continuous row of stars instead of one row at a time.

In the code below I've fixed these issues and made it so it outputs each row in a <p>. There are numerous ways to achieve this result and improve upon it, but I think this is what you were aiming for.

function generatePyramid() {
  let rows = 9;
  let output = "";
  for (let i = 1; i <= rows; i  ) {
    output  = "<p>";
    for (let j = 1; j <= i; j  ) {
      output  = "* ";
    }
    output  = "</p>";
  }
  return output;
}

document.getElementById("pyramid").innerHTML = generatePyramid();

CodePudding user response：

Try this

document.getElementById("pyramid").innerHTML='generatePyramid()';