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 trialRifqi Fahmi
23,164 PointsHelp 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);
Jacob Mishkin
23,118 Pointsedited code for formatting.
Rifqi Fahmi
23,164 Pointshow to write like that?
Jacob Mishkin
23,118 Pointswhen you draft your post click on the Markdown Cheatsheet and it will tell you how to properly post code into the forum.
Jacob Mishkin
23,118 PointsJust curious why did you decide to use a while loop, instead of a for loop?
Rifqi Fahmi
23,164 PointsI want to prove that its also can be done with while loop
Jacob Mishkin
23,118 PointsOh 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
2,435 PointsAnother 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
9,564 PointsHi 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.
Jacob Mishkin
23,118 PointsThis 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.
Rifqi Fahmi
23,164 Pointsthanks it work
Konrad Pilch
2,435 Pointsl 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
23,164 Pointsnice analogy thaaanks :)
Rifqi Fahmi
23,164 Pointsbye the way why you write the "var" keyword again in the loop?
Konrad Pilch
2,435 PointsGood catch you don't ned to redefine them in the loop at you have already initialize it outside the loop
Rifqi Fahmi
23,164 PointsRifqi Fahmi
23,164 Pointshow to type code in treehouse so that the code has its own place. that code look confusing though