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 Working with 'for' Loops Dynamically Display HTML with a Loop

Nikita Tsigelberg
Nikita Tsigelberg
2,625 Points

Getting weird output in browser

Why am i getting i inside the white circles instead of numbers 1 to 10. i copied the code same exact way.

Jelena Feliciano
seal-mask
.a{fill-rule:evenodd;}techdegree
Jelena Feliciano
Full Stack JavaScript Techdegree Student 12,729 Points

const main = document.querySelector('main'); let html = '';

for( let i = 1; i < 11; i++) { html += <div>${i}</div>; }

main.innerHTML = html;

I entered mine like this and got the browser to read 1-10 for some reason the way the video shows it I got 1-9 instead.

4 Answers

Steven Parker
Steven Parker
229,608 Points

Always show your code with a question. But I'd guess you may have left off the ${} symbols, which would make it output the variable name instead of the number it represents.

If that's not it, show your actual code to allow for a more accurate answer.

Daniela Fernandes Smith
PLUS
Daniela Fernandes Smith
Courses Plus Student 10,353 Points

Jelena, to get the cleanest code, and to make sure it's easier for you to read it in the future, you could write it like this (this is something that adds to the lessons used in this video, but it's how I did it and it works perfectly fine). It uses concepts that are taught in the course DOM scripting by example, here at Tree House:

const main = document.querySelector('main');

for(let i = 1; i <=10; i++) { let div = document.createElement("div"); div.innerHTML = i; main.appendChild(div); }

If you prefer not to use the concepts not taught in this class, you can use instead:

const main = document.querySelector("main"); let html = "";

for(let i = 1; i <= 10; i++) { html += <div>${i}</div>; } main,innerHTML = html

Make sure you use <= in the loop, not <, if you want the numbers to display properly, from 1 to 10, and initiate your let i at 1, not 0.

Jelena Feliciano
seal-mask
.a{fill-rule:evenodd;}techdegree
Jelena Feliciano
Full Stack JavaScript Techdegree Student 12,729 Points

The way the video appears to give us a result on the browser 1 -9 const main = document.querySelector('main'); let html = '';

for( let i = 1; i < 10; i++) { html += <div>${i}</div>; }

main.innerHTML = html;

const main = document.querySelector('main'); let html = '';

This code worked better for getting the 1-10 result: for( let i = 0; i < 10; i++) { html += <div>${i + 1}</div>; }

main.innerHTML = html;

I also found this code to work:

const main = document.querySelector('main'); let html = '';

for( let i = 1; i < 11; i++) { html += <div>${i}</div>; }

main.innerHTML = html;

Daniela Fernandes Smith
PLUS
Daniela Fernandes Smith
Courses Plus Student 10,353 Points

Nikita, you probably forgot to use the ${} to wrap the let i inside your for loop. it should be like this:

hmtl += <div>${i}</div>;

you probably wrote it like this, instead:

html += <div>i</div>