Как сделать обратный отсчет цикла for, который создает элемент <p>с заданным номером на каждой итерации?

Question

Это может показаться безумно простым.Но я борюсь с этим простым созданием цикла for, так как элемент p не создается ни в одной итерации цикла.Я не знаю, как отобразить вновь созданный элемент p в моем элементе div (.output).

Он должен создавать элемент p для my div на каждой итерации, показывая текущее значение i.Когда это 10, он должен сказать что-то вроде «Обратный отсчет начался» и в конце «Обратный отсчет завершен!».Вот небольшой пример (остальные html пропущены):

<div class="output"></div>

<script>
let output = document.querySelector(".output");
output.innerHTML = '';
countBegin= "Countdown has started";
countEnd  = "Countdown has ended";
countBet  = "Countdown at ";

function countD() {
for (let i = 10; i<= 0; i--) {
    var para = document.createElement("p"); 
    if (i === 10) {
        para.textContent = countBegin + i;

    } else if (i === 0) {
        para.textContent = countEnd;

    } else {
        para.textContent = countBet + i;
    }
    output.appendChild(para);
}

}

countD();

</script>
</body>

Я бы ожидал увидеть хотя бы одну строку в качестве вывода в окне браузера, но, к сожалению, ее нет.

Answer 1

Поскольку вы выполняете цикл от 10 до 0, условие цикла должно быть i >= 0:

let output = document.querySelector(".output");

output.innerHTML = '';
countBegin = "Countdown has started";
countEnd = "Countdown has ended";
countBet = "Countdown at ";

function countD() {
  for (let i = 10; i >= 0; i--) {
    var para = document.createElement("p");
    if (i === 10) {
      para.textContent = countBegin;
    } else if (i === 0) {
      para.textContent = countEnd;
    } else {
      para.textContent = countBet + i;
    }
    output.appendChild(para);
  }
}

countD();

<div class="output"></div>