Вернуть треугольную форму целых чисел со строками, равными данному целому числу, используя JavaScript

Question

Какой самый эффективный способ получить треугольную форму целых чисел со строками, равными данному целому числу. Кроме того, первая строка должна начинаться только с одного целого числа и после каждой новой строки увеличивается на один символ до тех пор, пока она также не станет равна целому числу?

например. Если я введу 5, я хочу, чтобы это вернуло:

5
55
555
5555
55555

Или, если я введу 3, я получу:

3
33
333

---

Что я пробовал до сих пор:

var n = 5;

for (i = 0; i < n; i++) {
    var x = (n.toString().repeat(n) + '\n').repeat(n);   
}

document.getElementById('output').textContent = x;

#output {
padding: 10px;
background-color: #000;
color: #FFF;
font-size: 16px;
white-space: pre-line;
}

<div id="output"></div>

Answer 1

Я хотел бы использовать две петли. Внутренний цикл будет выводить число, зацикливание, пока она не станет меньше внешнего контура плюс 1 (чтобы покрыть первый выход). Внешний контур будет обрабатывать разрывы строк. Как бы добавить в существующем textContent с +=.

Это можно видеть в следующем:

var n = 5;

for (i = 0; i < n; i++) {
  for (j = 0; j < i + 1; j++) {
    document.getElementById('output').textContent += n;
  }
  document.getElementById('output').textContent += "\n";
}

#output {
  padding: 10px;
  background-color: #000;
  color: #FFF;
  font-size: 16px;
  white-space: pre-line;
}

<div id="output"></div>

Также обратите внимание, что вы ищете font-size, а не text-size.

Answer 2

Вам нужно построить строку постепенно и повторить в соответствии с текущей итерацией.

var n = 5;
var x = '';

for (var i = 1; i <= n; i++) {
    x += n.toString().repeat(i) + '\n';
}

document.getElementById('output').textContent = x;

#output {
padding: 10px;
background-color: #000;
color: #FFF;
text-size: 16px;
white-space: pre-line;
}

<div id="output"></div>