While 循环和 innerHTML - 为啥它会反向显示数字？

Posted 2023-05-07

【中文标题】While 循环和 innerHTML - 为啥它会反向显示数字？

【英文标题】：While loop and innerHTML - Why does it show the numbers in reverse?While 循环和 innerHTML - 为什么它会反向显示数字？

【发布时间】：2019-02-07 07:16:17

【问题描述】：

function doItAgain() 

            var loopCount = 5;

            while(loopCount > 0) 

                    var target = document.getElementById("target");
                    target.innerhtml = "LoopCount: " + loopCount + "<br>" + target.innerHTML;
                    console.log("LoopCount is now: " + loopCount);
                    loopCount = loopCount -1;
                

这是当前函数。 它由使用 onclick 事件处理程序定义的按钮激活。

现在，我的问题如下 -> 为什么在按下按钮后会显示从 1 到 5 的数字，而不是像控制台中那样从 5 到 1 的数字？ 我已经知道，如果我将 target.innerHTML 设置为句子的开头，它将在我的网页中从 5 到 1 显示它们，但我不知道为什么会这样

【问题讨论】：

在脑海中或在纸上仔细阅读它。您正在添加到字符串的前面，因此您正在将第一个添加的数字向下推。

将target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;更改为target.innerHTML = target.innerHTML; + "LoopCount: " + loopCount + "<br>"

^^ 从一开始就学习如何使用浏览器和/或 IDE 中内置的调试器也非常值得。然后，您可以单步执行代码，逐个语句，并准确查看变量在任何给定时刻包含的内容，您正在执行的操作顺序是什么等。

简要地说，我认为这是我问题的解决方案，但它飞走了，我再也找不到它了。感谢您的澄清，@Carcigenicate

您在每次迭代中添加新数据，即迭代越晚，距离字符串末尾越远，相当于“越靠近字符串开头” .

【参考方案1】：

考虑这一行的作用：

target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;

假设target.innerHTML，在第一个循环之后，包含

LoopCount: 5<br>

然后在loopCount = 4 循环中，你正在做

target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;

又是

target.innerHTML = "LoopCount: " + loopCount + "<br>" + "LoopCount: 5<br>";
// -----------------------------------------------------^^^^^^^^^^^^^^^^^^

所以你得到

LoopCount: 4<br>LoopCount: 5

等等。

如果您将innerHTML first 放在该行，您将颠倒顺序：

target.innerHTML = target.innerHTML + "<br>LoopCount: " + loopCount;