С помощью вложенных циклов необходимо вывести числа от 1 до 50

Question

Необходимо с помощью вложенных циклов for вывести числа в пять рядов, чтобы получился результат:

01 02 03 04 05 06 07 08 09 10
11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30
31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50

Внешний цикл выводит перенос строки br и запускается от 1 до 5. Вложенный цикл рисует цифры от 1 до 10. Не понимаю, как сделать? Можно наверное с помощью if/else для каждой итерации прописать, но я думаю, что это не очень правильно.

let out10 = document.querySelector('.out-10');
let btn10 = document.querySelector('.b-10');

let cycleT10 = () => {
    for(let i = 1; i <= 5; i++){
        for(let k = 1; k <= 10; k++){
            if(k < 10){
                out10.innerHTML += '0' + String(k) + ' ';
                }
                else{
                    out10.innerHTML += k;
                };
            };
            out10.innerHTML += '<br>'
        };       
    };   
cycleT10();

Answer 1

Можно воспользоваться встроенным методом строк padStart - он дополняет строку до нужного количества символов с начала строки указанным шаблоном

const container = document.getElementById('container');

let cycleT10 = () => {
  let appendString = '';
  for (let i = 0; i < 5; i++) {
    for (let j = 1; j <= 10; j++) {
      appendString += `${10 * i + j} `.padStart(3, '0');
    }
    appendString += '<br />'
  }
  container.innerHTML = appendString;
}
cycleT10();

<div id="container"></div>

Так же изменена логика вставки текста в DOM. Текст вставляется один раз, а не на каждой итерации вложенного цикла

Answer 2

О padStart() вам уже рассказали. Так что просто приведу простое решение — во время цикла проверяем очередное число на кратность 10 if(i % 10 === 0) и добавляем перенос.

const container = document.querySelector('.container');
for (let i = 1; i <= 50; i++) {
  container.innerHTML += i.toString().padStart(2, '0') + ' ';
  if (i % 10 === 0) {
    container.innerHTML += '<br>';
  }
}

<div class="container"></div>

Однако нужно учитывать, что не все шрифты одинаково красивы, полезны и моноширинны. Потому возможно вам понадобится добавить блоку стиль font-family: monospace. Но ведь можно пойти дальше, и изначально сделать блок <pre></pre>, который буквально для этого и придуман, и сделать код ещё проще, безо всяких там <br>

const container = document.querySelector('.container');
for (let i = 1; i <= 50; i++) {
  container.textContent += i.toString().padStart(2, '0') + ' ';
  if (i % 10 === 0) container.textContent += '\n';
}

<pre class="container"></pre>

Как видите, вместо наполнения тега за счёт .innerHTML мы переключились на текстовое содержимое .textContent и в качестве переноса строки выбрали \n.

При желании можно пойти ещё дальше, и чтобы не городить лишние символы :) вообще отказаться от цикла for в пользу скорости while:

const container = document.querySelector('.container');
let i = 1;
while (i <= 50) {
  container.textContent += i.toString().padStart(2, '0') + ' ';
  if (i % 10 === 0) container.textContent += '\n';
  i++;
}

<pre class="container"></pre>

БЛОГ НА HUSL

С помощью вложенных циклов необходимо вывести числа от 1 до 50

Ответы (2 шт):