A bit stuck with the "triangle" program in Javascript

Question

I have a bit of an issue at the moment that I am hoping one of you can help me with. I have tried several things, and I just can't get it. I am trying to print a triangle of asterisks using JavaScript. The program is to ask the user for the amount of rows, and then the direction. I haven't even started with the direction yet because I can't get the rows to work. Odd thing is that I can get it to print out the triangle hard-coding the function call.

This is the JS file:

function myTriangle(){

var result = "";

var totalRows = document.getElementById('rows').value;
var direction = document.getElementById('UpOrDown').value;

for (var i = 1; i <= totalRows; i++){

    document.writeln("count");
for (var j = 1; j <= 1; j++)
    {
           result += "*";
    }

    result += "<br/>";
}
return result;
}

var answer = myTriangle();
document.getElementById('myDiv').innerHTML = answer;

This is the HTML file:

<!DOCTYPE html>
<head>
<title>Lab 2</title>
<script src="scripts.js", "div.js"></script>

</head>
<body>

<form name="myForm">
    <fieldset>
        <legend>Input Fields</legend>
    rows:      <input type="text" id="rows" /><br>
    direction: <input type="text" id="UpOrDown" /><br>
    press: <input type="button" value="GO!" id="myButton" 
    onclick="myTriangle();"/>
    </fieldset>
</form>

<div id="myDiv">

</div>  

</body>

The output will be something like this:

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

var j = 1; j <= 1; j++) is always going to iterate only once, is that intended? — Hanky Panky
– Hanky Panky, Commented Jun 23, 2013 at 14:14

Ayush Sharma · Accepted Answer · 2016-07-08 10:37:30Z

2

Generally there are four types of triangle -

1.)*     2.) ***   3.)    *    4.) ***
   **        **          **         **
   ***       *          ***          *

Code for 1 -

var ast = [],
i, j = 4;
for (i = 0; i < j; i++) {
 ast[i] = new Array(i + 2).join("*");
 console.log(ast[i]);
}

Code for 2 -

var ast = [],
i, j = 4;
for (i = j-1; i >=0; i--) {
  ast[i] = new Array(i + 2).join("*");
  console.log(ast[i]);
}

Code for 3 -

var ast = [],
i, j = 4;
for (i = 0; i < j; i++) {
  ast[i] = new Array(j - i).join(' ') + new Array(i + 2).join("*");
  console.log(ast[i]);
}

Code for 4 -

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

To print asterisk in document rather than console -

 document.getElementById('anyElement').innerHTML+=ast[i] + '<br />';

edited Jul 8, 2016 at 10:37

answered Jul 8, 2016 at 10:28

Ayush Sharma

2,11718 silver badges25 bronze badges

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

Comments

Niet the Dark Absol · Accepted Answer · 2013-06-23 14:21:14Z

0

document.writeln will completely wipe the page unless it's called while the page is loading.

Therefore it will destroy myDiv, causing the getElementById to fail.

Furthermore, I'm not sure what you're trying to achieve with that <script> tag, but it looks like you need two of them.

EDIT: Oh, and this: for (var j = 1; j <= 1; j++) will only ever iterate once.

EDIT 2: Here's my implementation of a solution.

edited Jun 23, 2013 at 14:21

answered Jun 23, 2013 at 14:13

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

4 Comments

Christopher Lewis Over a year ago

thanks for taking the time to answer this. I actually left that document.writeln statement in there by accident. I had tested this to see if it would pass the parameter in, and forgot to take it out before I posted this.....sorry about that. However, I still can't get the line "for (var j=1; j<=1; j++).....or I should say my head around it. It works if I hard code the amount of rows into the function, so why not now? Thanks again.

Niet the Dark Absol Over a year ago

I've edited my answer with a JSFiddle link to my working solution to this problem.

Christopher Lewis Over a year ago

Thanks so much. This JSFiddle link is great......a lot of the time I do better when I try to "reverse engineer" a problem. I think I am a visual learner more than anything else.

Niet the Dark Absol Over a year ago

Same here! That's how I learned. If anything about the Fiddle confuses you, I'll be happy to explain it.

Dennis · Accepted Answer · 2013-06-23 14:40:36Z

0

This isn't a valid script tag.

<script src="scripts.js", "div.js"></script>

You need to break it up into two tags:

<script src="scripts.js"></script>
<script src="div.js"></script>

answered Jun 23, 2013 at 14:40

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Comments

pixel 67 · Accepted Answer · 2016-03-13 09:04:37Z

0

This is my solution, it uses es2015 .replace() but there is a nice polyfill for es5 as well here:

var output = document.getElementById('output');



function triangle (size) {
  for (var i = 1; i <= size; i++) {
    output.innerHTML += '*'.repeat(i) + '<br>';
  }
}

triangle(2);

This is a solution in ES3/5

var output = document.getElementById('output');

function triangle(size) {
  var allLines = '';
  for (var i = 1; i <= size; i++) {
    var oneLine = createLine(i);
    allLines += oneLine;
  }
  return allLines;
}

function createLine(length) {
  var aLine = '';
  for (var j = 1; j <= length; j++) {
    aLine += '*';
  }
  return aLine + "<br/>";
}

output.innerHTML += triangle(3);

<div id='output'></div>

edited Mar 13, 2016 at 9:04

answered Dec 10, 2015 at 22:37

pixel 67

1,65820 silver badges22 bronze badges

Collectives™ on Stack Overflow

A bit stuck with the "triangle" program in Javascript

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related