How to repeat a character using Javascript?

Question

I am attempting to draw a star pattern (which is activated by a button press) on my website that looks like this:

 *******
 ******
 *****
 ****
 ***
 **
 *

I've tried using the JS code below to accomplish this, but the characters are not appearing like I would like them to.

var x="*";

for(i=0;i<28;i++) {
    function myFunction(){document.getElementById("Asterisk").innerHTML=x}
}

I've also sampled the HTML code below

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet"
 type="text/css"
 href="css/looping.css">

<script src="looping.js"> </script>
</head>


<body>

<button id="filler" onclick="myFunction()"> Fill in the box </button>

<div id="Obelix">
<div id="Asterisk">

</div>
</div>

You're assigning x to innerHTML 28 times but it's still "*". Try adding it — Wainage
– Wainage, Commented Aug 1, 2017 at 5:05

Soviut · Accepted Answer · 2017-08-01 05:51:07Z

2

Your javascript isn't going to work because you're declaring, not calling, a function inside your for loop. The function keyword is a declaration, meaning you're creating that function each loop.

Second, you're only ever going to get a single * inside your element because x doesn't change. You're trying to assign it 28 times, but that will just set the value to one asterisk 28 times; Not create a series of asterisks.

Instead, you need to build a single long string using two nested for loops, one for each row, the other for each character (column) in the row. As the outer loop (rows) increases, take it's index and subtract it from the length of the inner loop (columns). This way, as the outer loop increases, the number of times the inner loop iterates decreases. Below is some pseudo code to understand the concept:

for i in 28:
  for j in (28 - i):
    print '*'

This would result in (variable values wouldn't actually be shown, they're there for clarity):

i = 0  ****************************  j = 28 - 0
i = 1  ***************************   j = 28 - 1
i = 2  **************************    j = 28 - 2
etc...

To actually display this as separate rows is going to require you also write a <br> tag between each row so that it "breaks" to the next line. Line feeds and other white space characters are not respected in HTML so without the <br> tag, the browser will just render all the rows in a single long line. The pseudo code would be something like:

for i in 28:
  for j in (28 - i):
    print '*'
  print '<br>' # this happens after each loop

This would result in:

****************************<br>
***************************<br>
**************************<br>
etc...

Remember, rather than printing, you'd be appending those * and <br> to a single long string which you can then finally set as innerText or innerHTML on an element.

PS: I've intentionally used pseudo code to help explain the concepts, rather than just give you something to copy-paste.

edited Aug 1, 2017 at 5:51

answered Aug 1, 2017 at 5:05

Soviut

92.2k53 gold badges210 silver badges285 bronze badges

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

2 Comments

BrownEyedNinja Over a year ago

I truly appreciate this. Thank you for breaking down for me in a way I could understand!

BrownEyedNinja Over a year ago

I came up with a solution and posted it below, thanks again.

lanjinglingiii · Accepted Answer · 2017-08-01 05:13:36Z

2

Try this

function myFunction() {
    var str = '*';
    var content = '';
    for(var i=7; i>0; i--) {
        content += str.repeat(i) + "\n";
    }
    document.getElementById("Asterisk").innerHTML = '<pre>' + content + '</pre>';
}

Hope help

answered Aug 1, 2017 at 5:13

lanjinglingiii

212 bronze badges

Comments

Berkay Yaylacı · Accepted Answer · 2017-08-01 05:12:02Z

1

Try this,

function myFunction() { // you need to put for loop inside the function
  var br = document.createElement("br"); // for every new line we need br
  var asterisk = document.getElementById("Asterisk"); 
  for (i = 28; i > 0; i--) {
    asterisk.innerHTML += x.repeat(i - 1); // repeat "*" -1 times every time
    asterisk.appendChild(br); // append br to div, so it will paste the new * to new line
  }
}

Hope helps,

answered Aug 1, 2017 at 5:12

Berkay Yaylacı

4,5132 gold badges22 silver badges39 bronze badges

Comments

Lime · Accepted Answer · 2017-08-01 05:15:14Z

1

You can do something like this.

<!doctype html>
<div id=Asterik>
</div>
<script>
window.onload=function(){
     str='';
     for(var i=7;i>0;i--){
       for(var j=i;j>0;j--)str=str+"*";
       str=str+"<br>";
     }
     document.getElementById("Asterik").innerHTML=str;
};


</script>

answered Aug 1, 2017 at 5:15

Lime

13.6k12 gold badges59 silver badges93 bronze badges

Comments

Mohideen bin Mohammed · Accepted Answer · 2017-08-01 05:41:38Z

1

if you dynamic pyramid try this,

you can define rows in run time

function myFunction() {
  j = document.getElementById('pyramid_row').value;
  var ast = [],
  i = 4;
  if (j) {
    for (i = j-1; i >=0; i--) {
      ast[i] = new Array(i + 2).join("*");
      console.log(ast[i]);
    }
  }
}

<input type="number" value="Rows you want" id="pyramid_row">
<button id="filler" onclick="myFunction()"> Fill in the box </button>

edited Aug 1, 2017 at 5:41

answered Aug 1, 2017 at 5:34

Mohideen bin Mohammed

20.4k11 gold badges121 silver badges131 bronze badges

Comments

BrownEyedNinja · Accepted Answer · 2017-08-01 06:31:50Z

0

Managed to figure it out after understanding the concepts properly. Here is my solution in case anyone needs it for reference.

i=0;

function myFunction(){

for(;i<7;i++) { 

for(a=i;a<7;a++) { 

$('#Asterisk').append("*");


}

$('#Asterisk').append("<br>");

}


}

answered Aug 1, 2017 at 6:31

BrownEyedNinja

1071 gold badge1 silver badge11 bronze badges

Collectives™ on Stack Overflow

How to repeat a character using Javascript?

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related