Triangle with an empty center based on a given height in Javascript

Question

I had a task recently to do an empty triangle based on a random height given by a user.

It had to look like that but the user was the one who could set the height.
My script looks like this now:

var hgh = prompt("Set the triangle's height: ");

  document.write("<center><pre>");
  for (var i = 1; i <= hgh ; i++) {
    var s = "";
    for (var j = 1; j <= (2 * hgh - 1); j++) {
      if (i != hgh ) {
        if (j == hgh + 1 - i || j == hgh - 1 + i) {
           s += "X";
        }
        else {
          s += " ";
        }
      }
      else {
        s += "X";
      }
    }
    document.write(s);
    document.write("<br>");
  }
  document.write("</pre></center>");

The result looks like this:

Which part of my script do I have to correct so that it displays the triangle correctly?

Answer 1

The problem is in this condition:

if (j == hgh + 1 - i ... )

hgh is in reality a string (because prompt returns a string). So the "+" operator works on strings here and concatenates hgh and "1" instead of adding these values. If you enter "5", (hgh + 1) will result in "51", not "6".

Quick solution: Rewrite the expression as hgh - i + 1. There is no string subtraction, so (hgh - i) will convert hgh into a number and do a proper subtraction.

Answer 2

I took a slightly different approach but it seems to work OK when rendered within a pre element rather than directly writing to the page as above.

const triangle=()=>{
  let pre=document.querySelector('pre');
  let height=Number( prompt('Set the triangle\'s height:') ) || false;
  let maxheight=32;

  // only proceed with valid integers above 1 & less than 33 in value...
  if( isNaN( height ) || height==false ){
    alert('Not a number numbnut!');
    return false;
  }
  if( height < 2 ){
    alert('Given height is too small');
    return false;
  }
  if( height > maxheight ){
    alert('Too high');
    return false;
  }

  // hwp: Half-Way Point
  let hwp;

  // k: for even numbered triangles subtract this value to the spaces
  let k=0;



  // calculate half way point
  if( height % 2 == 0 ){
    hwp=height/2;
    k=1;
  }else{
    hwp=( height - 1 ) / 2;
  }

  // characters used
  let c=String.fromCharCode(88);
  let s=String.fromCharCode(32);
  let n=String.fromCharCode(10);



  for( let i=0,j=0; i < height-1; i++,j++ ){
    let r=[];
    if( i == 0 ){
      /*
        top row should be a single X at the HWP
        preceeded by a certain number of spaces.
        Approx 2 spaces per char
      */
      r.push(s.repeat( hwp * 2 - k ));
      r.push(c);
    }else{
      /*
        subsequent rows have fewer spaces before the initial
        X but an increasing amount of spaces after.
      */
      r.push(s.repeat( ( hwp * 2 ) - j - k ) );
      r.push(c);
      r.push(s.repeat( ( j + i ) - 1 ) );
      r.push(c);
    }
    pre.innerHTML+=[ r.join(''), n ].join('');
  }
  // final row is only X chars ~ approx twice height value
  pre.innerHTML+=c.repeat( ( height * 2 ) - 1  );               
}

triangle();

pre{margin:1rem;}

<pre></pre>