关于嵌套while循环矩形的问题

Question

我正在使用 Javascript 绘制矩形。不幸的是，我的嵌套 while 的外循环似乎无法正常工作。目前 (xy) 在一行中出现五次，并且不会像预期的那样在并发行中重复出现。

    function Art() { 
// row and col are taking input data from the form in index
    //var row = document.getElementById("row").value; 
    //var col = document.getElementById("height").value; 
    var row=5; 
    var col=3;

    var countrow =1; 
    var countcol =1; 
   document.getElementById("magic").innerHTML=("rectangle has "+ row +" rows and "+ col + " columns");

      while (col> countcol){

           while(countrow<=row){ 
            document.getElementById('count').innerHTML=document.getElementById('count').innerHTML+"(XY)";
            countrow++;
           } 
        document.getElementById('count').innerHTML=document.getElementById('count').innerHTML+"<p></p>"; 
        countcol++; 
    }


}

一个运行的当前输出： (xy)(xy)(xy)(xy)(xy)

有人可以看看我的代码并帮助我理解我的逻辑错误吗？

谢谢。

Expected output

Answer 1

您的循环变量 countrow 第一次变为 row 的值，但随后在外部 while 循环的下一次迭代中它不会重新启动。那么内部的while将不再执行。

此外，您的循环似乎以错误的顺序定位：您应该首先迭代行，然后每行迭代列。

通过交换循环并在每次迭代中重置内部循环计数器来修复它：

var countrow = 1;
while(countrow<=row){ 
    countcol = 1;
    while (countcol<=col){
        document.getElementById('count').innerHTML=document.getElementById('count').innerHTML+"(XY)";
        countcol++;
    } 
    document.getElementById('count').innerHTML=document.getElementById('count').innerHTML+"<p></p>"; 
    countrow++; 
}

如果为此使用标准 for 循环（而不是 while）会更好：

for (let countrow = 0; countrow < row; countrow++){
    for (let countcol = 0; countcol < col; countcol++){
        document.getElementById('count').innerHTML=document.getElementById('count').innerHTML+"(XY)";
    } 
    document.getElementById('count').innerHTML=document.getElementById('count').innerHTML+"<p></p>"; 
}

这至少会让它起作用。不过，我应该补充一点，向 innerHTML 重复添加内容并不是真正的最佳做法。

这也是可以做到的，只需对 innerHTML 进行一项赋值：

document.getElementById('count').innerHTML=
    Array.from({length: row}, () => "(XY)".repeat(col)).join("<p></p>");

Answer 2

你应该添加

 countrow =1;

内外循环

并更改

col> countcol

至

col>= countcol

 Art();

     function Art() { 
// row and col are taking input data from the form in index
    //var row = document.getElementById("row").value; 
    //var col = document.getElementById("height").value; 
    var row=5; 
    var col=3;

    var countrow =1; 
    var countcol =1; 
   document.getElementById("magic").innerHTML=("rectangle has "+ row +" rows and "+ col + " columns");

      while (col>= countcol){  ////Change > to >=
            countrow =1;  ////YOU SHOULD ADD JUST THIS
           while(countrow<=row){ 
            document.getElementById('count').innerHTML=document.getElementById('count').innerHTML+"(XY)";
            countrow++;
           } 
        document.getElementById('count').innerHTML=document.getElementById('count').innerHTML+"<p></p>"; 
        countcol++; 
    }


}

<div id=magic></div>
<div id=count></div>

关于嵌套while循环矩形的问题

Question about nested while loop rectangle

javascript

while-loop

nested-loops