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 The Refactor Challenge

Posted by Michael Dunagan
Michael Dunagan
1,863 Points

TEMPLATE LITERALS NOT WORKING - IS HARDCODING TEXT & BACKGROUND COLOR NOT CHANGING

Blew away all my typing so I am starting again so this may be a little more brief that required.

// As shown in video and as on script.js red = Math.floor(Math.random() * 256); green = Math.floor(Math.random() * 256); blue = Math.floor(Math.random() * 256); randomRGB = rgb( ${red}, ${green}, ${blue} ); html += <div style="background-color: ${randomRGB}">2</div>;

// As worked on using video provided instruction for ( i=1; i<=10; i++ ) { Math.floor(Math.random() * 256); green = Math.floor(Math.random() * 256); blue = Math.floor(Math.random() * 256); randomRGB = rgb( ${red}, ${green}, ${blue} ); html += <div style="background-color: ${randomRGB}">2</div>; }

ISSUE: The output is "i, i, i, i, i, etc." Also, no background color changes.

// My Reworking the template litteral line results in flawless output of 1, 2, 3, 4, 5, etc. for ( i=1; i<=10; i++ ) { Math.floor(Math.random() * 256); green = Math.floor(Math.random() * 256); blue = Math.floor(Math.random() * 256); randomRGB = rgb( ${red}, ${green}, ${blue} ); html += '<div style="background-color: ' + randomRGB + '">' + i + ' </div>'; }

Still the background color does not change. It is a mystery to me.

2 Answers

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

I see 3 issues in the revised code:

  • "html" should be initialized to an empty string before the loop
  • "red" is not defined ("let red = " is missing from the first loop line)
  • a "document.write" is needed after the loop to display the completed "html"

Also, "best practice" would be to always explicitly declare new variables (with "let", "const", or "var").

Michael Dunagan
Michael Dunagan
1,863 Points

Thank you for your expeditious reply.

So I am correct; I was not to blame because the index.html file was typed by "not me" and no word on the video which I may recall said to make changes that you stated.

This is kinda the downside of "internet classrooms"; cannot directly confront the instructor who participated in the videos.

The upside in wonderful persons such as you who come to the aid of a struggling career changing older veteran.

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

The video code shows the html initialization on line 1, and the very last line updates the page but with a different (and better) technique than my previous suggestion.

You can see the final code at about 1:30 in The Refactor Challenge – One Solution video.

Happy coding!

marialena alevizaki
marialena alevizaki
10,296 Points
marialena alevizaki
marialena alevizaki
10,296 Points

Basically the code you get is ready. You get this code 10 times: red = Math.floor(Math.random() * 256); green = Math.floor(Math.random() * 256); blue = Math.floor(Math.random() * 256); randomRGB = rgb( ${red}, ${green}, ${blue} ); html += <div style="background-color: ${randomRGB}">${i}</div>; and you have to use a for loop. The problem is that you have to define the variable i.

Michael Dunagan
Michael Dunagan
1,863 Points

Thanks for your reply.

Duly Noted to the assigning a variable, but i think I did globally. I got the code to run, save background color changes, so that part of the code sailed through.