Блог

Главная - Вопросы по программированию - Почему цикл выполнения моей функции while начинается с 5,4,3,2,1 в консоли, но 1,2,3,4,5 на веб-странице

Почему цикл выполнения моей функции while начинается с 5,4,3,2,1 в консоли, но 1,2,3,4,5 на веб-странице

#javascript

#javascript

Вопрос:

Итак, у меня есть этот js-код:

 function lFunc(){

    var loopCount = 5;

    while(loopCount > 0) {

        var target = document.getElementById("p3");
        target.innerHTML = "loopcount: "   loopCount   "<br>"   target.innerHTML;
        console.log("loopcount is now: "   loopCount);
        loopCount = loopCount - 1;
    }
}

в консоли он показывает:

 loopcount is now: 5
loopcount is now: 4
loopcount is now: 3
loopcount is now: 2
loopcount is now: 1

но на веб-странице это показывает:

 loopcount: 1
loopcount: 2
loopcount: 3
loopcount: 4
loopcount: 5

Целевая ссылка на var — это просто пустой открытый и закрытый p-тег.
Я не понимаю, почему веб-страница меняется с 1 на 5, на мой взгляд, она должна меняться с 5 на 1

Комментарии:

1. Потому что вы добавляете спереди. Итак, сначала он говорит «количество циклов 5». Затем вы добавляете «количество циклов 4» спереди. И так далее

2. как вы думаете "loopcount: " loopCount "<br>" target.innerHTML , что делает

3. Потому console.log что добавляет сообщения в конце, но ваша innerHTML модификация добавляет его.

Ответ №1:

Ваша конкатенация здесь перепутана:

 target.innerHTML = "loopcount: "   loopCount   "<br>"   target.innerHTML;

Например, если существующий HTML равен 5, и вы добавляете к нему 4, результирующий HTML будет 4 5 . Используйте = вместо этого, чтобы последующие итерации добавляли разметку в конец контейнера, а не добавляли ее к началу:

 target.innerHTML  = "loopcount: "   loopCount   "<br>";

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

 target.insertAdjacentHTML('beforeend', "loopcount: "   loopCount   "<br>");

Или вставьте <div> s вместо <br> s:

 target.appendChild(document.createElement('div')).textContent = 'loopcount: '   loopCount;

Ответ №2:

Для того чтобы желаемый результат соответствовал вашему консольному выводу, вам нужно будет изменить вывод DOM на обратный. Код будет выглядеть так:

  function lFunc() {

    var loopCount = 5;

    while(loopCount > 0) {

        var target = document.getElementById("p3");
        target.innerHTML = target.innerHTML   "<br />loopcount: "   loopCount;
        console.log("loopcount is now: "   loopCount);
        loopCount = loopCount - 1;
    }
 }

какие результаты:

 loopcount: 5
loopcount: 4
loopcount: 3
loopcount: 2
loopcount: 1

То, что у вас изначально было во время выполнения, будет выглядеть следующим образом:

 target.innerHTML = "LoopCount: "   loopCount   "<br>"   "LoopCount: 5<br>";
//where your "LoopCount: 5<br>" is the value of target.innerHTML

результатом будет:

 LoopCount: 1<br>LoopCount: 2<br>LoopCount: 3<br>LoopCount: 3<br>LoopCount: 5<br>

какие результаты:

 loopcount: 1
loopcount: 2
loopcount: 3
loopcount: 4
loopcount: 5