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

Rifqi Fahmi
Rifqi Fahmi
23,164 Points

Help with my code

hi I want to ask why this code didn't work. it's only display 1 div

var red = Math.floor(Math.random() * 256 );
var green = Math.floor(Math.random() * 256 );
var blue = Math.floor(Math.random() * 256 );
var rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
var count = 0
var html;
while ( count < 10 ) {
html += '<div style="background-color:' + rgbColor + '"></div>';
  count +=1;
}

document.write(html);
Rifqi Fahmi
Rifqi Fahmi
23,164 Points

how to type code in treehouse so that the code has its own place. that code look confusing though

edited code for formatting.

Rifqi Fahmi
Rifqi Fahmi
23,164 Points

how to write like that?

when you draft your post click on the Markdown Cheatsheet and it will tell you how to properly post code into the forum.

Just curious why did you decide to use a while loop, instead of a for loop?

Rifqi Fahmi
Rifqi Fahmi
23,164 Points

I want to prove that its also can be done with while loop

Oh yeah, most things can be done several different ways. the general rule of thumb on loops is; while loops are used if your not sure how many times you need to iterate threw something. If you are iterating through an array use a for loop, and use a for in loop use when iterating threw objects.

I agree it's fun to go outside the scope of the video and try new things. Its the best way to learn.

Konrad Pilch
Konrad Pilch
2,435 Points

Another idea on how to do it is to:

CLICK EDIT on your POST.

And just look how the code is formated . Or rather the text in your question/answer :D

2 Answers

Corin Faife
Corin Faife
9,564 Points

Hi Rifqi. When I tried to run your code it looked like there was only one div element, but in fact there were 10, all of which were the same colour.

This is because at the moment the random RGB generating code is not inside the while function and so is only being executed once.

Try updating your code to:

var count = 0;
var html;

while ( count < 10 ) {
    var red = Math.floor(Math.random() * 256 );
    var green = Math.floor(Math.random() * 256 );
    var blue = Math.floor(Math.random() * 256 );
    var rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
    html += '<div style="background-color:' + rgbColor + '"></div>';
      count +=1;
}

document.write(html);

and see if that helps.

This looks really good the only thing I would add is for the html var make sure its set to an empty string, or you might get an undefined error:

var html ="";

EDIT remember to add some CSS to the div element as well so it will be displayed like in the video, or however you want it.

Konrad Pilch
Konrad Pilch
2,435 Points

l would say always think about the process as it is a thing of repetition and you are telling the computer to do that. so let's say you want it to make you a cup of tea. But you give the computer the cup with a teabag and sugar and tell it to add hot water, the next time you want a cup of tea it would be expecting a tea bag and sugar already in the cup so would only add hot water and you end up with hot water instead of a cup of tea. So you need to supply the write information at the right time. l hope this analogy helps.

It didn't work because each loop is meant for a purpose and l would advice to read more about the different loops as they are very important when it comes to programming languages. To be specific with loops in javascript read about them on https://developer.mozilla.org/en-US/docs/Web/JavaScript or the http://www.w3schools.com/js/ .

using the while loop would make all of them have the same color at a particular time with the code above and always set your html variable to an empty string as suggested earlier so you get the code below:

var red = Math.floor(Math.random() * 256 );
var green = Math.floor(Math.random() * 256 );
var blue = Math.floor(Math.random() * 256 );
var rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
var count = 0
var html = " ";
while ( count < 10 ) {
html += '<div style="background-color:' + rgbColor + '">' + count + '</div>';
  count +=1;
}

document.write(html);

l also tweak the code to have count in the HTML written so that l know how many it is outputting. This always helps to debug your code. or you can always use the console.log() method.

The second example is using the for loop as in the video:

var html = " ";
var red ;
var green  ;
var blue ;
var rgbColor;
for ( var i = 0; i < 10; i += 1) {
   red = Math.floor(Math.random() * 256 );
green = Math.floor(Math.random() * 256 );
 blue = Math.floor(Math.random() * 256 );
 rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
html += '<div style="background-color:' + rgbColor + '">' + i +' </div>';

}

document.write(html);
Rifqi Fahmi
Rifqi Fahmi
23,164 Points

nice analogy thaaanks :)

Rifqi Fahmi
Rifqi Fahmi
23,164 Points

bye the way why you write the "var" keyword again in the loop?

Konrad Pilch
Konrad Pilch
2,435 Points

Good catch you don't ned to redefine them in the loop at you have already initialize it outside the loop