I was tasked to create a Pascal Triangle by getting a user input as the number of rows and I managed to create an array of it but how do I display it on a line by line basis or a triangle. Also, how can I limit the number of rows the user can input? Thanks for the answers

var user_input = document.getElementById("user_input").value;

function pascal(numberOfRows) {
  let pascalsTriangle = new Array(numberOfRows);

  for (let i = 0; i < numberOfRows; i  ) {
    let line = new Array(i   1);
    line[0] = 1;
    line[line.length - 1] = 1;

    for (let n = 1; n < line.length - 1; n  ) {
      let previousLine = pascalsTriangle[i - 1];
      line[n] = previousLine[n]   previousLine[n - 1]
    }
    pascalsTriangle[i] = line;
  }
  return pascalsTriangle
}

function myFunc() {
  var input = document.getElementById("user_input").value;
  document.getElementById("pascaltriangle").innerHTML = pascal(input)
}

<form>
  <input id="user_input" type="number">
  <input type="button" onclick="myFunc()" value="Submit">
</form>
<p id="pascaltriangle">Pascal's Triangle</p>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

When you call pascal you can map that returned nested array to a string using map to deal with each line, join to turn the line to a space-separated string, repeat to pad it with non-breaking spaces, and join again to join those line-strings with <br> to one, multiline HTML string:

        pascal(input).map((line, i) => 
            " ".repeat(input - i)   line.join(" ")
        ).join("<br>")

Snippet:

var user_input = document.getElementById("user_input").value;
function pascal(numberOfRows) {
    let pascalsTriangle = new Array(numberOfRows);

    for(let i = 0; i<numberOfRows; i  ) {
        let line = new Array(i 1);
        line[0] = 1;
        line[line.length - 1] = 1;

        for (let n = 1; n<line.length - 1; n  ){
            let previousLine = pascalsTriangle[i-1];
            line[n] = previousLine[n]   previousLine[n-1]
        }
        pascalsTriangle[i] = line;
    }
    return pascalsTriangle
}

function myFunc() {
    var input = document.getElementById("user_input").value;
    document.getElementById("pascaltriangle").innerHTML = 
        pascal(input).map((line, i) => 
            "&nbsp;".repeat(input - i)   line.join(" ")
        ).join("<br>");
}

<form>
    <input id="user_input" type="number">
    <input type="button" onclick="myFunc()" value="Submit">
</form>
<p id="pascaltriangle">Pascal's Triangle</p>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This is a very basic implementation, and will not work for greater inputs, as then the number of digits for one number should stretch the pyramid horizontally to keep it balanced.

A way to make this happen is to use a HTML table element:

var user_input = document.getElementById("user_input").value;
function pascal(numberOfRows) {
    let pascalsTriangle = new Array(numberOfRows);

    for(let i = 0; i<numberOfRows; i  ) {
        let line = new Array(i 1);
        line[0] = 1;
        line[line.length - 1] = 1;

        for (let n = 1; n<line.length - 1; n  ){
            let previousLine = pascalsTriangle[i-1];
            line[n] = previousLine[n]   previousLine[n-1]
        }
        pascalsTriangle[i] = line;
    }
    return pascalsTriangle
}

function myFunc() {
    let input = document.getElementById("user_input").value;
    document.getElementById("pascaltriangle").innerHTML = "<table>"  
        pascal(input).map((line, i) => 
            `<tr><td colspan=${input - i}</td><td>${line.join("</td><td></td><td>")}</tr>` 
        ).join("")
    "</table>";
}

<form>
    <input id="user_input" type="number">
    <input type="button" onclick="myFunc()" value="Submit">
</form>
<p id="pascaltriangle">Pascal's Triangle</p>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

As 2D Array you can use this function.

let numRows = 0,
    triangle, 
    start, 
    stop;


function pascalRecursive(n, a) {
  if (n < 2) return a; 

  let prevRow = a[a.length-1];
  let curRow = [1];

  for (let i = 1; i < prevRow.length; i  ) {
    curRow[i] = prevRow[i]   prevRow[i-1];
  }
  curRow.push(1);
  a.push(curRow);

  return pascalRecursive(n-1, a);
}

function myFunc(){
  const numRows = document.getElementById('user_input').value;
  let triangle = pascalRecursive(numRows, [[1]]);

  for(var i = 0; i < triangle.length; i  ) {
    console.log(triangle[i] "\n");
  }
}

<form>
    <input id="user_input" type="number">
    <input type="button" onclick="myFunc()" value="Submit">
</form>
<p id="pascaltriangle">Pascal's Triangle</p>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You're only meant to ask one question per question, but...

"Also, how can I limit the number of rows the user can input?"

Check the value before performing the pascal function, perhaps like this to limit it to less than 55:

function myFunc() {
  let input = document.getElementById("user_input").value;
  let n = parseInt(input);
  if (!isNaN(n) && n > 0 && n <55) {
    document.getElementById("pascaltriangle").innerHTML = pascal(n);
  }
}