innerHTML在for迴圈裡“只執行一次”的問題（本人小白一枚）
阿新 • • 發佈：2018-12-16
今天在w3school裡系統學習JS的知識時，看到一個TIY，原本程式碼如下：
<!DOCTYPE html> <html> <body> <p>點選下面的按鈕，將程式碼塊迴圈五次：</p> <button onclick="myFunction()">點選這裡</button> <p id="demo"></p> <script> function myFunction() { var x=""; for (var i=0;i<5;i++) { x=x + "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
執行結果很明顯：
The number is 0 The number is 1 The number is 2 The number is 3 The number is 4
我發現問什麼要把innerHTML放在for迴圈外面呢？放在裡面不是還能直接將x=x + "The number is " + i + "<br>";換為x="The number is " + i + "<br>";嗎？
於是我將document.getElementById("demo").innerHTML=x;放在了for迴圈裡面，但執行結果變成了：
The number is 4
有點懵逼，之後搜了下，發現要把document.getElementById("demo").innerHTML=x;換成
document.getElementById("demo").innerHTML+=x;就行了。
後來找了找innerHTML的意思是“內部的HTML”，然後恍然大悟，也就是說document.getElementById("demo").innerHTML指的是id為demo的元素的整體內容，所以如果直接用“=”，相當於將原來的內容覆蓋（/取代？）了，所以需要變為“+=”。
（注：題目“只執行一次”加了引號）