How to print hollow inverted star pattern in JavaScript in a good way?

Question

i have tried the code below, but it just show an inverted pyramid with no hollow. it also has an error unknown

var row = 5
for (i = 1; i <= row; i++) {
  for (j = 1; j < i; j++) {
    document.write("&nbsp;");
  } {
    for (j = 1; j <= (row * 2 - (2 * i - 1)); j++) {
      if (i == 1 || j == 1 || j == (row * 2 - (2 * i - 1))) {
        document.write("*");
      } else {
        document.write("&nbsp;");
      }
    }
  }
  document.write("<br/>")
}

i expected a hollow inverted star pattern

*it also has an error* Can you share what the error message is? — Rajesh, Sep 12 '19 at 10:15
Not getting into logic, every character has its own width. So a space and a asterisk will not occupy same space. Try adding following style: `body { font-family: monospace }` — Rajesh, Sep 12 '19 at 10:29

score 0 · Accepted Answer · answered Sep 12 '19 at 10:16

This will help. if you think the shape is not correct.

var row = 5
for (i = 1; i <= row; i++) {
  for (j = 1; j < i; j++) {
    document.write("&nbsp;&nbsp;");
  } {
    for (j = 1; j <= (row * 2 - (2 * i - 1)); j++) {
      if (i == 1 || j == 1 || j == (row * 2 - (2 * i - 1))) {
        document.write("*");
      } else {
        document.write("&nbsp;&nbsp;");
      }
    }
  }
  document.write("<br/>")
}

Ishpreet · Answer 2 · 2019-09-12T11:30:07.600

I think you should change document.write() because document.write shows error like document.write can be a form of eval and it is bad practice as mentioned in link document.write

HTML can be :

<div id="divid">
</div>

You can write javascript code as follows:

var theDiv = document.getElementById("divid");
var content = document.createTextNode('\u00A0');
theDiv.appendChild(content);
var content = "";
var row = 5
for (i = 1; i <= row; i++) {
  for (j = 1; j < i; j++) {
   var content = document.createTextNode('\u00A0\u00A0');
   theDiv.appendChild(content);
  } 
    for (j = 1; j <= (row * 2 - (2 * i - 1)); j++) {
      if (i == 1 || j == 1 || j == (row * 2 - (2*i - 1))) {
         var content = document.createTextNode("*");
         theDiv.appendChild(content);
      } else {
        var content = document.createTextNode('\u00A0\u00A0');
        theDiv.appendChild(content);
      }
    }

     var content = document.createElement("br");
     theDiv.appendChild(content);
  }

Here is the link of jsfiddle: jsfiddle

How to print hollow inverted star pattern in JavaScript in a good way?

2 Answers2