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

我正在使用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++; 
    }


}

函数艺术（）{
//行和列从索引中的表单获取输入数据
//var row=document.getElementById（“row”）.value；
//var col=document.getElementById（“高度”）.value；
var行=5；
var-col=3；
var countrow=1；
var countcol=1；
document.getElementById（“magic”）.innerHTML=（“矩形有“+行+”行和“+列+”）；
while（col>countcol）{
while（countrow循环变量
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++; 
}

不过，我应该补充一点，反复向
innerHTML
添加内容并不是最好的做法

下面是它的实现方法，只需对
innerHTML
进行一次赋值：

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

document.getElementById（'count'）.innerHTML=
数组.from（{length:row}，（）=>“（XY）”.repeat（col））.join（“
”）；
您应该添加

 countrow =1;  

内外环

改变

col> countcol

到


Art（）；
函数Art（）{
//行和列从索引中的表单获取输入数据
//var row=document.getElementById（“row”）.value；
//var col=document.getElementById（“高度”）.value；
var行=5；
var-col=3；
var countrow=1；
var countcol=1；
document.getElementById（“magic”）.innerHTML=（“矩形有“+行+”行和“+列+”）；
而（col>=countcol）{///Change>为>=
countrow=1；///您应该只添加以下内容
虽然（countrow我同意这是一种奇怪的方法，但是，我的作业特别要求这样做。我可以做什么来确保外部while在连续迭代中执行？通过将内部循环切换到外部，我的输出的格式也发生了变化。重置countrow计数器是解决方案。谢谢您我需要你的帮助，现在一切正常。
col> countcol

col>= countcol