Почему в этом l oop меняется порядок обратного отсчета? - PullRequest
Новая
       17

Почему в этом l oop меняется порядок обратного отсчета?

0 голосов
/ 11 апреля 2020

Я совершенно новичок в Javascript и пытаюсь учиться во время циклов. Однако есть один конкретный пример, который меня смущает, и я не могу обернуться.

Это мой код: 

function doItAgain (message) { 
    var count = 5;
    while(count > 0) {  
        substance.innerHTML = count + "<br>" + substance.innerHTML;
        count = count - 1;
    }

    alert("done");
}

Итак, мой вопрос: почему, когда я помещаю тег вещества.inner HTML после разрыва строки, я получаю обратный отсчет, начинающийся с 1, а когда я помещаю его, прежде чем он начинается с 5?

Я знаю, что это, вероятно, глупый вопрос, но это было бы очень полезно, если бы вы могли вести меня!

Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 11 апреля 2020

Когда вы используете count + "<br>" + substance.innerHTML, вы помещаете новый счет поверх предыдущих счетчиков (вы берете counter=2, например, ставите 2, и чем то, что было до 3 4 5)

И когда вы используете substance.innerHTML + "<br>" + count, вы сначала ставите то, что было первым, то есть 5 4 3, а затем добавляете количество. 

let substance = document.getElementById('myDiv');
function doItAgain () { 
    var count = 5;
    while(count > 0) {  
        substance.innerHTML = substance.innerHTML + "<br>" +count;
        count = count - 1;
    }

    console.log("done");
}
doItAgain()
<div id="myDiv"></div>
0 голосов
/ 11 апреля 2020

Думайте об этом с точки зрения того, что все равно после каждой поездки (итерации) через ваш l oop. Сначала я покажу, как будет выглядеть каждая итерация, если вы установите substance.innerHTML = count + "<br>" + substance.innerHTML:

До первого запуска l oop 

count = 5
substance.innerHTML = ""

После итерации # 1 

count = 4
substance.innerHTML = "5<br>"

После итерации # 2 

count = 3
substance.innerHTML = "4<br>5<br>"

После итерации # 3 

count = 2
substance.innerHTML = "3<br>4<br>5<br>"

После итерации # 4 

count = 1
substance.innerHTML = "2<br>3<br>4<br>5<br>"

После итерации # 5 

count = 0
substance.innerHTML = "1<br>2<br>3<br>4<br>5<br>"

Так как вы Вы помещаете счет перед всем, что вы уже установили в substance.innerHTML, каждый раз через l oop, вы в конечном итоге получаете что-то, что похоже на то, что он считает от 1 до 5.

Если вместо этого вы устанавливаете substance.innerHTML = substance.innerHTML + count + "<br>":

После итерации # 1 

count = 4
substance.innerHTML = "5<br>"

После итерации # 2 

count = 3
substance.innerHTML = "5<br>4<br>"

После итерации # 3 

count = 2
substance.innerHTML = "5<br>4<br>3<br>"

После итерации # 4 

count = 1
substance.innerHTML = "5<br>4<br>3<br>2<br>"

После итерации # 5 

count = 0
substance.innerHTML = "5<br>4<br>3<br>2<br>1<br>"

Поскольку вы ставите счет после всего, что вы установили в веществе. I nner HTML уже, каждый раз через l oop вы в конечном итоге получаете что-то, похожее на обратный отсчет от 5 до 1.

0 голосов
/ 11 апреля 2020

Не могли бы вы уточнить, какой у вас html, в частности, часть, касающаяся "вещество.иннер HTML"? Правильно ли я считаю, что «вещество» - это имя класса div?

Я думаю, что ваша строка назначения неверна. Строка: 

substance.innerHTML = count + "<br>" + substance.innerHTML;

Вы используете математическую логику c для элементов, которые нельзя суммировать вместе. К тому времени, когда ваш код достигнет этой строки, это текущие значения:

count = 5 (число)

= тег html (строка)
вещество.иннер HTML = (как строка?)

Так что я думаю, что может случиться так, что в одном случае Javascript останавливается на теге
и не включает в себя «вещество.иннер HTML" в логи c. А во втором случае он включает «вещество.иннер HTML» в логи c и по-прежнему игнорирует
после.

Я не могу на самом деле проверить ваш код, так как я Я не уверен, что вещество. внутренний HTML имеет в виду. Дайте мне знать, если это решит вашу проблему. :)

...