如何使用嵌套循环在 javascript 中制作钻石？

Question

I have made this code, but only works for the right half of the diamond, how do I make the full diamond? I need to use nested loops

function myDiamond(){
  let row, star;
  let toPrint = "";
  let rowCount = +prompt("Enter a number to make a diamond");
  
for (row = 1; row <= rowCount; row++){
  for (star = 1; star <= row; star++){
    if (star == 1 || star == row){
    toPrint +="*";
    } else {
      toPrint += " ";
    }
  }
  toPrint += "<br>";
} 
  document.getElementById("figure").innerHTML = toPrint;

  for (row = rowCount; row >= 1; row--){
    for (star = 1; star <= row; star++){
    if (star == 1 || star == row){
    toPrint +="*";
    } else {
      toPrint += " ";
    }
  toPrint += "<br>";
} 

  document.getElementById("figure").innerHTML = toPrint;
}
}

Answer 1

Is this what you're trying to do:

 function createDimondShape(size) { var stuff = ""; for (var i = 1; i <= size; i++) { for (var s = size - 1; s >= i; s--) { stuff += (" "); } for (var j = 1; j <= i; j++) { stuff += ("* ") } stuff += "\n"; } if (i == size + 1) { for (var i = 1; i <= size - 1; i++) { for (var s = 1; s <= i; s++) { stuff += (" "); } for (j = i; j <= size - 1; j++) { stuff += ("* "); } stuff += "\n"; } } document.getElementById("figure").innerHTML = stuff; } createDimondShape(5);

 <pre id="figure"></pre>

Couple of trials here:

 function createDimondShape(a, size) { var stuff = ""; for (var i = 1; i <= size; i++) { for (var s = size - 1; s >= i; s--) { stuff += (" "); } for (var j = 1; j <= i; j++) { stuff += ("* ") } stuff += "\n"; } if (i == size + 1) { for (var i = 1; i <= size - 1; i++) { for (var s = 1; s <= i; s++) { stuff += (" "); } for (j = i; j <= size - 1; j++) { stuff += ("* "); } stuff += "\n"; } } document.getElementById("figure" + a).innerHTML += stuff; } createDimondShape(1, 3); createDimondShape(2, 7);

 .f { display: flex; flex-direction: row; }.f pre { width: 45%; }

 <div class="f"> <pre id="figure1"></pre> <pre id="figure2"></pre> </div>

Preview

With prompt, as asked in the comments:

 function createDimondShape(size) { var stuff = ""; for (var i = 1; i <= size; i++) { for (var s = size - 1; s >= i; s--) { stuff += (" "); } for (var j = 1; j <= i; j++) { stuff += ("* ") } stuff += "\n"; } if (i == size + 1) { for (var i = 1; i <= size - 1; i++) { for (var s = 1; s <= i; s++) { stuff += (" "); } for (j = i; j <= size - 1; j++) { stuff += ("* "); } stuff += "\n"; } } document.getElementById("figure").innerHTML = stuff; } createDimondShape(+prompt("Enter a number..."));

 <pre id="figure"></pre>

Answer 2

you can do that

 document.querySelectorAll('input[type=range]').forEach(r=>r.oninput=_=>r.closest('label').dataset.val=r.value) btDiamond.onclick=_=> { const szD = szDiam.valueAsNumber oneDiamond.textContent = '' for(let sp=szD;sp--;) oneDiamond.textContent += ' '.repeat(sp) + '/'.repeat(szD-sp) + '\\'.repeat(szD-sp) + '\n' for(let sp=0;sp<szD;sp++) oneDiamond.textContent += ' '.repeat(sp) + '\\'.repeat(szD-sp) + '/'.repeat(szD-sp) + '\n' }

 label, pre { margin: 0.5em 1.2em; } label input { vertical-align: middle; width: 300px; } label::after { display: inline-block; content: attr(data-val); width: 2em; }

 <h4>shine bright like a diamond</h4> <label data-val="6"> size: <input type="range" id="szDiam" min="1" max="20" value="6"> </label> <button id="btDiamond"> draw !</button> <hr> <pre id="oneDiamond"> your diamond will go here </pre>