为什么在这个循环中倒计时顺序会发生变化？

Question

我对 Javascript 完全陌生，一直在尝试学习 while 循环。然而，有一个特殊的例子让我感到困惑，我无法理解。

这是我的代码：

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

    alert("done");
}

所以我的问题是，为什么当我在换行符之后放置 material.innerHTML 标记时，我得到一个以 1 开头的倒计时，而当我将它放在它之前以 5 开头的倒计时？

我知道这可能是一个愚蠢的问题，但如果你能指导我，这将是巨大的帮助！

提前致谢！

Answer 1

当您使用 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>

Answer 2

能否请您澄清一下您的 html，特别是关于“substance.innerHTML”的部分？ 我假设“substance”是 div 的类名是否正确？

我认为您的分配行不正确。行：

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

您正在对无法相加的项目运行数学逻辑。 当您的代码到达该行时，这些是当前值：

count = 5（数字）
= 一个 html 标签（字符串）
material.innerHTML =（像字符串？）

所以我认为可能发生的情况是，在一种情况下，Javascript 在
标记处停止，并且在逻辑中不包括“substance.innerHTML”。 而在第二种情况下，它在逻辑中包含了“substance.innnerHTML”，并且仍然忽略了
after.

我无法真正测试您的代码，因为我不确定 material.innerHTML 指的是什么。 让我知道这是否能解决您的问题。 :)

Answer 3

根据循环中的每次旅行（迭代）后一切都等于什么来考虑它。首先，如果您设置substance.innerHTML = count + "<br>" + substance.innerHTML，我将展示每次迭代的样子：

在第一次运行循环之前

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 中设置的所有内容，每次循环时，您最终都会得到一些看起来像是从 1 计数到 @ 987654330@.

如果你设置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>"

由于您已经将计数置于您在 material.innerHTML 中设置的所有内容之后，因此每次通过循环时，您最终都会得到一些看起来像是从 5 倒数到 1 的东西。