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 trialGerald Susanteo
Front End Web Development Techdegree Student 7,117 PointsMy version for doing this challenge
So one problem is that the colors shown is all the same and that the numbers arent changing. http://w.trhou.se/16ypowk7fl anyone can help?
3 Answers
Robert Gulley
Front End Web Development Techdegree Student 10,722 PointsGerald -
You are very close. Remember that JavaScript reads the code from top to bottom (except for functions). With the way that your code is currently written, you are declaring the red, green, blue, and randomRGB values before you enter the for loop. Since you are doing this, that code is only being run once, which is why all your circles are the same color.
Try adding the red, green, blue, and randomRGB variables into your for loop.
kevin hudson
Courses Plus Student 11,987 PointsGerald Susanteo, one more step closer. To see the change in colors, you need to add the colors and their values in the loop as well. That way during each iteration it will randomly choose a color based off the Math.random() function * 256 for the color RGB range.
You can also make this a function to easily input the desired number length
let html = '';
let red;
let green;
let blue;
let randomRGB;
const main = document.querySelector('main');
const colorRange = numLength => {
for(let i = 1; i <=numLength; i++){
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>`;
}
main.innerHTML = html;
}
colorRange(10);
Phil Livermore
11,018 PointsThe numbers do not change as you have enetered one between the div elements so it will always be one, you need to change that to be the varaible i.
The colours are all the same as red, green and blue variable are defined when the script loads, so they are only set once. If you want different colours on each iteration of the loop then you will need to define the colours in a function and then call the function each time, or you can just put the Math.floor code in 3 times into the loop like this: rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 PointsHey Phil Livermore I fixed the changing number issue but i still dont quite understand to change the colors for each div elements (the 1 , 2 , 3 , 4 , 5 , 6 ,7 , 8 , 9 , 10)
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 PointsGerald Susanteo
Front End Web Development Techdegree Student 7,117 Pointshey Robert Gulley thank you so much for this solution, everything works like its supposed to! Thx for the explanation aswell!