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

3 Answers

Gerald -

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.

Gerald 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
Phil Livermore
11,018 Points

The 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 Points

Hey 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)