CODEWITHSUNDEEP
javascripthtmlarrays
BrownEyedNinja
BrownEyedNinja

Reputation: 107

How to repeat a character using Javascript?

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>

Upvotes: 2

Views: 966

Answers (6)

BrownEyedNinja
BrownEyedNinja

Reputation: 107

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>");

}


}

Upvotes: 0

Soviut
Soviut

Reputation: 91555

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.

Upvotes: 2

Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20137

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>

Upvotes: 1

Lime
Lime

Reputation: 13569

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>

Upvotes: 1

lanjinglingiii
lanjinglingiii

Reputation: 21

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

Upvotes: 2

Berkay Yaylacı
Berkay Yaylacı

Reputation: 4513

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,

Upvotes: 1

Related Questions