Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops For Loops

Erika Green
seal-mask
.a{fill-rule:evenodd;}techdegree
Erika Green
Front End Web Development Techdegree Student 2,514 Points

Why am I getting an extra circle?

I think I wrote my code correctly, but for some reason an extra circle shows up at the end.

var html = " ";

for(var i = 1; i <= 10; i += 1)  {
    html += "<div>" + i + "</div>";
} 
document.write(html);

4 Answers

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Hello Erika.

Can you please tell us what output you want to get with your code?

We will then have a deeper look, but the first thing I notice is is that your document.write statement is outside the for loop, which does not seem to be correct.

If you provide some extra info about what you want to have in the end, I will be able to help I think.

Ty

Vittorio

PS I have edited your post for readability (I only wrapped the piece of code)

Vittorio,

Can you please edit her comment and wrap her code so that it will render correctly? Thanks!

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Marcus Parsons Thanks for the heads-up, I must be still asleep!

No problem, and I +1'd your post because it is a good idea to get some clarity on this question! Thanks again, Vittorio!

But, I think you forgot the "javascript" keyword beside the beginning code block because even though it's in a block, the syntax still isn't being highlighted correctly.

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

LOL this is embarrassing.

Thanks for moderating me!

I'll see you at my next mistake! :)

Don't sweat it! I was once a moderator, but hey, one jackass gets under your skin and it gets revoked! Oh well, they can't stop me from helping out. lol

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Hello Erika.

How many times do you want it to run?

Have you tried using i<10 instead of i<=10 in the for loop?

Erika Green
seal-mask
.a{fill-rule:evenodd;}techdegree
Erika Green
Front End Web Development Techdegree Student 2,514 Points

Yes, and it runs 1 through 10 in the circles but then an 11th circle appears and it's a little higher than the first 10?

Did I put the i<=10 in the wrong space? I put it between var i = 1 and i += 1.

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

That is definitely the right place to put it.

It is difficult to provide a solution without knowing exactly what you are trying to do here, could you be more specific? Do you have other pieces of code related to this?

Your code should run exactly 10 times!

Have you tried using i<10 ?

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

What do you exactly mean by "extra circle"?

Are you linking to another file / another piece of code? Because the code you provided runs 10 times only.

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Are you working with that javascript piece of code only or you have other html code as well? If you have other html code, please paste it here.

Erika Green
seal-mask
.a{fill-rule:evenodd;}techdegree
Erika Green
Front End Web Development Techdegree Student 2,514 Points

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Circles</title> <link rel="stylesheet" href="css/styles.css"> </head> <body id="color"> <script src="js/script.js"></script> </body> </html>

Erika, instead of attempting to post your code to the forum, you should just go ahead and post a snapshot of your workspace.

It's really easy! :) All you gotta do is go to your Workspace, go to the top right corner, and click on the far left button that looks like a mini TV with a dot in the middle of it. Then, you click "Take Snapshot", and click on the new snapshot you created. It will open another tab/window where you'll see your name and code and stuff. Go up to the address bar, highlight that new URL, copy it, and then paste it here!

Patricia Snyder
Patricia Snyder
5,563 Points

Hi Erika, Did you ever get this resolved? I forked your workspace from the snapshot, ran it and it showed the proper amount of circles. .