為什么我的簡單循環無法在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

開始循環后，您將重新分配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 2

您正在用循環體內的元素覆蓋計數器變量。 快去喝點咖啡吧！

在第一個循環之后，a不是數字，因此<= 100返回false。

Answer 3

您可以使用a變量循環計數器，為您創造的股利。 您確實需要更多的咖啡和一天的休息時間。 ：P

Answer 4

因為你打破了

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 5

您正在為counter和div元素使用相同的變量名。

相反，應為：

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

Answer 6

您應該為循環的變量和循環內的變量使用不同的名稱，如下所示：

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 7

評論是正確的，但為什么沒有得到顯示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);
}

Answer 8

不應該

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