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

alee2
alee2
4,101 Points

For Loops--Downloaded code solution & the css, html, and .js files are the same as mine, but display v differently

Am sure I'm missing something that's staring me right in the face--downloaded the lesson files and they render as the video. However, when I manually write the code into the text editor within Treehouse, when it runs, the divs are not being created in the same way. every space and character in the .js file is the same between what I've typed and what I've downloaded, but somewhere, the file I typed is picking up an injected stylesheet. here are the pertinent screenshots and code snippets. happy to include additional, just let me know. Any help is appreciated.

Removed the preview.

UPDATED 2/15---> Snapshot Here

screenshot1-treehouse editor file

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

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

and the css is absolutely untouched and matches exactly what's in the dowloaded file...

@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');

/*General*/
body {
  background: #fff;
  max-width: 980px;
  margin: 50px auto;
  padding: 0 20px;
  font: Helvetica Neue, Helvectica, Arial, serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5em;
  color: #8d9aa5;
}

a {
  color: #3f8aBf;
  text-decoration: none;
}

a:hover {
  color: #3079ab;
}

a:visited {
  color: #5a6772;
}

h1, h2, h3 {
  font-weight: 500;
  color: #384047;
}

h1 {
  font-size: 1.8em;
  margin: 60px 0 40px;
}

h2 {
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    padding: 10px 0 30px 0;
}


h3 {
  font-size: .9em;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

h3 em {
  font-style: normal;
  font-weight: 300;
  margin: 0 0 10px 5px;
  padding: 0;
  color: #8d9aa5;
}

ol {
  margin: 0 0 20px 32px;
  padding: 0;
}


.lens {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #8d9aa5;
  border-radius: 5px;
  position: absolute;
  margin: 5px 0 0 -19px;
}

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

span {
  color: red;
}

here's the downloaded file as it displays in the browser: screenshot-dowload

Jennifer Nordell
Jennifer Nordell
Treehouse Staff

Hi there! Unfortunately, the link you provided to your workspace is private to you and temporary. To provide us with a way to see your workspace you will need to link a snapshot. :sparkles:

alee2
alee2
4,101 Points

Thanks Jennifer Nordell b/c I couldn't get the whole css file in the snapshot I just inserted the code snippets into the post instead...hope that helps. Thanks again!

3 Answers

alee2
alee2
4,101 Points

Still hoping someone can help me with this one. Updated today with snapshot.

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

Hi there, alee2! I feel like the problem here might be that there actually isn't one. The injected style sheet you're talking about is the user style sheet. Every browser has one. They just define the default CSS for elements across the board. That's what you're seeing. My guess here is that you might be a bit confused by your console.log. You put it inside the for loop which means that every time it's adding a div... and it's cumulative. So the first time it will add <div>1</div>, but that doesn't get erased. The next time, it adds another div onto that. So now you have <div>1</div> and <div>2</div>. Then you have <div>1</div><div>2</div><div>3</div>. The important thing to note here is that we're building a whole stack of divs... one div at a time. Then we're going to take the whole thing once it's built and apply it to the page. At the point where you're doing the console.log() it's still in the building process.

The point where it gets written to the DOM is in this line:

document.write(html);

Before that line, it's still building up. In that line we send the entire thing and write it all at once. So to check what is actually being written to the DOM, you should move your console.log() statement.

var html = '';

for (var i = 1; i <= 10; i += 1) {
 html += '<div>' + i + '</div>'; 
  console.log(html);
}
document.write(html);
console.log("This is what is actually written to the DOM");
console.log(html);

My guess is that you'll notice that what is written to the DOM is what you have here.

Hope this helps! :sparkles:

alee2
alee2
4,101 Points

Thanks so much for your help Jennifer Nordell I hope you can answer a few follow up questions. Yes, your explanation mostly makes sense. thank you!

But the injected style sheet then is a result of my browser?

If I go into the developer tools and I look at the elements, you can see that the for loop in my code is creating one div with ALL the numbers in the div--instead of separate div's each containing one number only (downloaded version). This is caused by the browser style sheet? The style sheet can affect the HTML structure of what's written into it? How can I fix it? I see normalize at the top of both the sheets in the downloaded solution and the workspaces css files... Now I'm a little baffled.

Thanks again for your help!

Jennifer Nordell
Jennifer Nordell
Treehouse Staff

Yes, the injected style sheet has something specifically to do with your browser. I'm trying to figure out what. To be honest, I've never seen this before. It looks like it's Chrome. Is that correct? And is this on macOS or Windows? To be clear, I forked your workspace and it ran just fine without the div problem you're talking about.

A screenshot of your code in my browser:

your code

alee2
alee2
4,101 Points

Jennifer Nordell oh weird! Yes, this is Chrome and I'm on a mac running sierra 10.12.6

OK at least I got the code right, but wondering if this will affect other things i write...

Thank you for investigating....I'll do some googling too. Hopefully someone at Treehouse has seen this before? Thank you!

adrian orive
adrian orive
5,399 Points

var html = '';

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

I'm having the same issue on my mac while running on chrome. I rechecked it so many times before coming to the comments.