Javascript：打印 Y、X 次

Question

我觉得我可能在这里犯了一个根本性的错误。我希望有人可以帮助我。

function countdown() {

  x = 5;

  for (i = x; i > 0; i--) {
    document.getElementById('display').innerHTML = (i + " ");
  }

}

这是我遇到的问题的一个非常小的、简单的复制。

我的函数很长。在该函数中是一个变量，在本例中为：X。

我想在一个元素中插入一些东西（在这种情况下：#display）X 次。

我认为最好的方法是使用 for 循环，从 X 倒数 1 并每次插入我想要的字符串。

但是当它运行时，它只返回 1。（在这种情况下，我希望它返回“5 4 3 2 1”）。

请有人向我解释为什么这不起作用？我已经为此绞尽脑汁好几个小时了。

Answer 1

因为您在每次迭代中通过为innerHTML 分配一个新值来覆盖元素的内容。你必须追加：

document.getElementById('display').innerHTML += (i + " ");
//                                           ^

与

相同

document.getElementById('display').innerHTML = 
    document.getElementById('display').innerHTML + (i + " ");

---

当然如果你只是在循环中构建字符串并在循环之后设置内容会更好：

var content = '';

for (i = x; i > 0; i--) {
  content += (i + " ");
}

document.getElementById('display').innerHTML = content;

这样可以避免每次迭代都在文档中搜索元素。但是.innerHTML 只是在一定程度上有用，你也应该看看 DOM 操作函数（例如.appendChild），一旦你开始进行更高级的操作。