为什么我的简单循环不能在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); 
}