javascript - Why won't my simple loop run in jsfiddle.net? - Stack Overflow

admin管理员组

文章数量:1290091

Maybe I did not drink enough coffee this morning but I'm getting a strange error for this seemingly simple loop:

/

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);
}

Maybe I did not drink enough coffee this morning but I'm getting a strange error for this seemingly simple loop:

http://jsfiddle/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);
}

• javascript
• jsfiddle

Share Improve this question Follow edited Nov 23, 2015 at 13:51 cade galt asked Nov 23, 2015 at 13:49 cade galtcade galt 4,17199 gold badges3535 silver badges4949 bronze badges 4

• 2 switch a++; a <= 100 around to a <= 100;a++; – AmmarCSE Commented Nov 23, 2015 at 13:50
• just a typo while transposing ... still no go ... try it in the fiddle. – cade galt Commented Nov 23, 2015 at 13:52
• Ouch... People need to refresh the page before the click submit on their answers x) – Domino Commented Nov 23, 2015 at 13:56
• a is the counter but you reassign it in the loop. Use a separate var for the loop – Blindman67 Commented Nov 23, 2015 at 13:56

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 5

You are re-assigning a as soon as you start your loop.

Don't re-use a for your element variable, use something else:

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

You're overwriting your counter variable with an element in your loop body. Go grab more coffee, quick !

After the first loop, a isn't a number, so a <= 100 returns false.

You use the a variable for the loop counter AND for the div you create. You indeed need more coffee and a day off. :P

because you break a

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);
}

Try this

You are using the same variable name for both the counter and the div element.

Should instead be:

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

You should use different name for your variable for the loop and the variable inside the loop like this:

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);
}

the ments are correct, but the reason why the 100 divs are not getting displayed is because you are reassigning your a variable to the div.

use this code instead, a is now the div and the running variable is called 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);
}

shouldnt it be

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

本文标签： javascriptWhy won39t my simple loop run in jsfiddlenetStack Overflow