爲什麼我的簡單循環不能在jsfiddle.net中運行？

Question

也許我沒有喝足夠的咖啡今天上午，但我發現一個奇怪的錯誤了這個看似簡單的循環：

http://jsfiddle.net/za2Lrduo/1/

var a; 
for(a = 1; a <= 100; a++){ 
    a = document.createElement('div'); 
    a.style.width = '10px'; 
    a.style.height = '10px'; 
    a.style.background = 'red'; 
    document.body.appendChild(a); 
} 

Answer 1

它不應該是

for (a = 1; a <= 100; a++) 
{ 
    ... 
} 

Answer 2

你用你的循環體中的一個元素覆蓋你的計數器變量。去搶更多的咖啡，快！

第一次循環後，a不是一個數字，所以< = 100返回false。

Answer 3

當您開始循環時，您正在重新分配a。

不要重複使用a您元素變量，用別的東西：

var elem; 
for(var a = 1; a <= 100; a++){ 
    console.log(a); 
    elem = document.createElement('div'); 
    elem.style.width = '10px'; 
    elem.style.height = '10px'; 
    elem.style.background = 'red'; 
    document.body.appendChild(elem); 
} 

JSFiddle

Answer 4

您使用a變量爲您創建的div循環計數器和。 你確實需要更多的咖啡和一天休息時間。 ：P

Answer 5

，因爲你打破一個

var a, 
    square; 
for(a = 1; a <= 100; a++){ 
    console.log(a); 
    square = document.createElement('div'); 
    square.style.width = '10px'; 
    square.style.height = '10px'; 
    square.style.background = 'red'; 
    document.body.appendChild(square); 
} 

試試這個

Answer 6

您正在使用相同的變量名的計數器和div元素兩者。

應改爲：

for(var i = 1; i <= 100; i++){ 

Answer 7

你應該爲你的變量環路和環路像這裏面的變量使用不同的名稱：

var a; 
var i; 
for(i = 1; i <= 100; i++){ 
    a = document.createElement('div'); 
    a.style.width = '10px'; 
    a.style.height = '10px'; 
    a.style.background = 'red'; 
    document.body.appendChild(a); 
} 

Answer 8

的意見是正確的，但原因爲什麼100個div沒有顯示是因爲你正在將你的a變量重新分配給div。

使用這個代碼，而不是，a現在是div和運行變量稱爲i

var i; 
for(i = 1; i <= 100; i++){ 
    console.log(a); 
    var a = document.createElement('div'); 
    a.style.width = '10px'; 
    a.style.height = '10px'; 
    a.style.background = 'red'; 
    document.body.appendChild(a); 
}