title: struggling with creating asterisks in Javascript
body: <p>I've been struggling with this for some time now. What I wanted to create is to output a triangle of asterisks based on user's input. Let say user entered size 5, it would look something like this:</p>
  
  <pre><code>*
  **
  ***
  ****
  *****
  </code></pre>
  
  <p>My HTML looks like:</p>
  
  <pre><code>&lt;p&gt;
  Size: &lt;input type="text" id="size"&gt;
  &lt;input type="button" value="Draw" onclick="draw()"&gt;
  &lt;/p&gt;
  
  &lt;pre id="output"&gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>In my Javascript, I have:</p>
  
  <pre><code>function draw()
  {
    var size = customJS.get ( "size" ); //I have a custom library where it get the Id from HTML
    var theTriangle = makeTriangle( size.value ); //sending in the size
    customJS.set ("output", theTriangle); //will set theTriangle to display to "output" in HTML
  }
  
  function makeTriangle( theSize )
  {
      var allLines = "";    // an empty string to hold the entire triangle
      for ( var i = 0; i &lt;= size; i++) // this loop size times
      {
          var oneLine = createLine ( i &lt;= size ); // amount of asterisks for this line
          allLines += oneLine;
      }
      return allLines;
  }
  
  function createLine ( length )
  {
      var aLine = "";     // an empty string to hold the contents of this one line
      for ( var j = 0; j &lt;= i; j++ ) //this loop length times
      {
          aLine += '*';  
      }
      return aLine + "&lt;br&gt;";
  }
  </code></pre>
  
  <p>anyone have any tip on how I go about this? thank you so much!</p>