Вопрос о вложенном цикле while - PullRequest
Новая
       46

Вопрос о вложенном цикле while

0 голосов
/ 26 ноября 2018

Я работаю над рисованием прямоугольника, используя Javascript.К сожалению, похоже, что внешний цикл моего вложенного пока не работает должным образом.В настоящее время (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)

Может ли кто-нибудь взглянуть на мой код и помочь мне понять мою логикуошибка?

Спасибо.

Ожидаемый результат

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Вы должны добавить 

 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>
0 голосов
/ 26 ноября 2018

Ваша переменная цикла 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>");
...