在HTML上將多個寫入同一ID

Question

有人知道顯示HTML頁面后是否可以訪問特定的ID（getElementById），並將其值更改幾次嗎？

我想提供一個客戶端字符串，並根據程序的進度對其進行多次更改，但是我不能，它只是最近才寫的。

例如：

<script type="text/javascript">
  function foo(){
   for(var i = 0; i<10000; i++){
     document.getElementById('myTag').innerHTML = i;
   }
  }
</script>

在這種情況下，我看不到數字在增長。 我只看到最后一個。

如果我將警報放在循環內-值將更改。

Answer 1

據我了解您的問題，您想要從0到10000的計數？ 您想在屏幕上看到進度嗎？ 你可以做這樣的事情：

http://jsfiddle.net/camus/ayJFM/

var interval = 500;//milliseconds
var foo = (function () {
    var i = 0;
    var func = function () {

        if (i < 10000) {
            document.getElementById("myTag").innerHTML = i;
            i += 1;
            setTimeout(func, interval);
        }
    };
    return func;
})();

setTimeout(foo, interval);

Answer 2

你快到了。 您唯一做錯的是替換innerHTML內容，而不是添加內容。 更改此：

document.getElementById('myTag').innerHTML = i;

對此：

document.getElementById('myTag').innerHTML += i;

---

附加/替代答案：

等待。 我剛剛重新閱讀了您的問題，並意識到還有另一種解釋方法。 您詢問的方式非常模糊，因此我將上述答案保留原樣。

在處理for循環時看不到“運行數字”的原因是因為您誤解了javascript在瀏覽器中的工作方式。

瀏覽器的事件循環運行如下所示：

1. Fetch content
2. Run javscript
3. Render content
then repeat forever

這就是javascript的工作方式。 因此，像執行操作一樣運行一個簡單的for循環。 瀏覽器將執行腳本，直到沒有其他要執行的步驟為止（步驟2）。 javascript完成執行后，它將開始呈現過程（第3步）。 顯然，這時i值為最終值，因此您只能看到最終值。

瀏覽器從不中斷運行javascript來渲染/更新頁面。 那么，人們如何實現倒數計時器等？ 他們通過安排一段JavaScript在事件循環的下一次迭代中執行來實現。 也就是說，讓瀏覽器進入步驟3，並在適當的時刻，當瀏覽器再次進入步驟2時，它們將運行所需的腳本。

Javascript基本上提供了兩種方法來執行此操作：setTimeout和setInterval。

setTimeout的工作方式是這樣的：

step 1. nothing to do
step 2. setTimeout schedules a piece of javascript to run at a later time
        Note that the javascript does not execute yet until setTimeout
        expires.
step 3. let the browser update the page
many, many loops of steps 1-3
step 2 (some time later).
        setTimeout expires and the piece of javascript executes
step 3. let the browser update the page

因此，要獲得所需的效果，您需要這樣做：

function foo(){
  var i = 0;
  var update = function(){
    document.getElementById('myTag').innerHTML = i;
    i++;
    if (i<10000) {
      setTimeout(update,100);
    }
  };
  update();
}