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

Werner Chao
PLUS
Werner Chao
Courses Plus Student 1,951 Points
Posted by Werner Chao
Werner Chao
Courses Plus Student 1,951 Points

Meaning of <div> block.

This is the first time a <div> block has showed up. Why does it appear as a circle? And why does a number automatically appears in the center of the circle?

Is this due to a pre-styled css from somewhere else?

2 Answers

Nick Field
Nick Field
17,091 Points
Nick Field
Nick Field
17,091 Points

Werner, the Div element is simply a container, BUT it can be pre-styled. If you look in the styles.css file, you'll see the following styling applied to Div elements:

#color div {
  box-sizing: border-box;
  padding-top: 12px;
  text-align: center;
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
  background-color: rgb(230,230,230);
}

Here we see styling is applied to elements within the element associated with the 'color' id, which is the main body element in the html file:

<body id="color">

This is a pre-styling technique, so that every time you add a div element in the html file it will automatically be styled with various properties (color, size, width, height etc) that were declared in the styles.css file already added to the document:

  <link rel="stylesheet" href="css/styles.css">

You can learn more about styling on the CSS basics course

A number appears in a div element because in the for loop the following code is executed;

  html += '<div>' + i + '</div>';

Each time it is executed, a concatenated string containing the value i within div element syntax is stored and added to any previous syntax to the variable html. So eventually a concatenated string is stored as follows;

<code> html = ' '<div>' + 1 + '</div>' '<div>' + 2 + '</div>' '<div>' + 3 + '</div>' '<div>' + 4 + '</div>' '<div>' + 5 + '</div>' '<div>' + 6 + '</div>' '<div>' + 7 + '</div>' '<div>' + 8 + '</div>' '<div>' + 9 + '</div>' '<div>' + 10 + '</div>' </code>

Finally when the for loop is finished after the statement is true, the following code is executed;

document.write(html);

So the html variable with that concatenated string is added to the html file within the <body> tags, and the div elements are then styled using the pre-defined styling in the css file.

Hope that helps!

Richard Duffy
Richard Duffy
16,488 Points
Richard Duffy
Richard Duffy
16,488 Points

Hey,

Could you please post your code, it will help us to solve your problem.

Regards,

Richard.