Create a number pyramid using an array

Question

I want to ask the user via a prompt to Enter a number:. Then, I want to use an array to print the numbers to the screen like a "normal pyramid" and an "upside-down pyramid".

I want to make an input field and a button next to it. Inside the input side you can give a number between 1-20 when you click on the button it should show this:

But only till the number you put inside the field so if you put 8 the pyramid only show 1-8 and not 9-20.

var number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

question();
function question() {
    if(question != 1) {
        prompt("enter a number.", "20");
        for (var a = 0; a < question; a++) {
    
        }
    }
}

I tried doing this, but I can't get it to work.

i did now put 20 in the loop because you can answer 1-20 but it still doesnt work — user14541933
– user14541933, Commented Jan 7, 2021 at 11:43
What is question != 1 for? question is the name of the function right? And whats is the purpose of the array number after all If you want to get user's input? Also, I suggest you to check prompt() docs, you're using it wrong. — DontVoteMeDown
– DontVoteMeDown, Commented Jan 7, 2021 at 11:45

Jamiec · Accepted Answer · 2021-01-07 11:57:48Z

1

This can be done with a pair of simple nested loops as shown below.

var num = prompt("enter a number",20)

for(var i=0;i<=num;i++) {
  var s = "";
  for(var j=0;j<=i;j++) {
    s+=j
  }
  document.getElementById("output").innerHTML += (s + "<br>")
}

for(var i=num;i>=0;i--) {
  var s = "";
  for(var j=0;j<=i;j++) {
    s+=j
  }
  document.getElementById("output").innerHTML += (s + "<br>")
}

<div id="output">
</div>

edited Jan 7, 2021 at 11:57

answered Jan 7, 2021 at 11:52

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yavuz Sevgi · Accepted Answer · 2021-01-07 12:27:39Z

0

Should be more short and quick:

var n=20;
n=parseInt(prompt("Enter number",n),10);
var s="";
for(var j=0;j<2;j++)
   for(var i=0;i<n+1;i++){
     if(j==0)s+=i;
     console.log(s);
     if(j==1)s=s.substr(0,s.length-((n-i)>9?2:1));
}

edited Jan 7, 2021 at 12:27

answered Jan 7, 2021 at 12:18

Yavuz Sevgi

213 bronze badges

Comments

54ka · Accepted Answer · 2021-01-07 21:36:50Z

In this example I use slice() and join() methods

var number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

for (var i = 0; i <= number.length; i++) {
    var x = number.slice(0, i).join('');
    console.log(x);
}

for (var i = number.length; i >= 0; i--) {
    var x = number.slice(0, i).join('');
    console.log(x);
}

HTML Example:

function piramid() {
    var res = document.querySelector('div');
    res.innerHTML = '';

    var n = +document.querySelector('input').value;
    var number = [];
    for (var i = 0; i <= n; i++) {
        number.push(i);                
    }

    for (var i = 0; i <= number.length; i++) {
        var x = number.slice(0, i).join('');
        res.innerHTML += x + '<br>';
    }

    for (var i = number.length; i >= 0; i--) {
        var x = number.slice(0, i).join('');
        res.innerHTML += x + '<br>';
    }
}

<input type="number">
<button onclick="piramid()">Click me</button>

<div></div>

Aalexander · Accepted Answer · 2021-02-15 06:38:26Z

Solution

Inside the question() method we build the string with nested loops.

Then we concat the values up to the value of the outer loop and then insert this string into the result and do the newline(in reasons of html I do a "<br>")
For the upside down orthogonal triangles we are doing the same just in the outer loop starting from the input value and not from zero and decrement instead of incrementing the indice.

function question() {

  let val = parseInt(prompt("enter a number.", "20"));
  let res = "";
  let temp = "";

  for (let a = 0; a <= val; a++) {
    for (let b = 0; b <= a; b++) {
      temp += "" + b;
    }
    res += "" + temp + "<br>"
    temp = "";
  }

  res += "<br>"


  for (let b = val; b >= 0; b--) {
    for (let c = 0; c <= b; c++) {
      temp += c
    }
    res += temp + "<br>"
    temp = "";

  }
  document.getElementById("in").innerHTML = res;

}

<p id="in"></p> 
<button onclick="question()">Click Me</button>

Collectives™ on Stack Overflow

Create a number pyramid using an array

4 Answers 4

Comments

Comments

Comments

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related