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 – Duplicate Code

Shane Patel
Shane Patel
21,619 Points

Making a further change - How to use the random value function with an argument?

I am having difficulty with tweaking the solution further for the sake taking my understanding further. I would like to make the randomValue function reusable so that it uses a parameter instead of the fixed value of 256.

Original Function: As per the lesson the function is:

function randomValue() {
    return Math.floor(Math.random() * 256);
}

Revised Function: The function I would like to use:

function randomValue(upper) {
    return Math.floor(Math.random() * upper);
}

I have been wracking my brain with this one but I cannot seem to make what I believe should work ... to work:

for (let i = 1; i <= 10; i++) 
    html += `<div style = "background-color: ${randomRGB(randomValue(256)} " > ${i}</div> `;
}

PS. There are a few things I discovered while trying to figure the above out: Making the Circles Greyscale To have the same random number applied to the red, green, blue channels so that each circle is displayed in greyscale I removed the parenthesis after the word 'value' in the return statement and added parenthesis after the word 'randomValue', the argument in the html statement in the for loop.

function randomRGB(value) {
    return `rgb(${value}, ${value}, ${value})`
}

for (let i = 1; i <= 10; i++) {
    html += `<div style = "background-color: ${randomRGB(randomValue())} " > ${i}</div> `;

Important Update:

I have got closer to the solution, I can use the randomValue function with an argument randomValue(upper) but I can only get as far as greyscale with the bonus of being able to limit how brightness of the circles in the html. The example below will show 10 circles varying between black and very dark grey.

let html = '';

function randomValue(upper) {
    return Math.floor(Math.random() * upper);
}

function randomRGB(value) {
    return `rgb(${value}, ${value}, ${value})`
}

for (let i = 1; i <= 10; i++) {
    html += `<div style = "background-color: ${randomRGB(randomValue(50))} " > ${i}</div> `;
}
document.querySelector('main').innerHTML = html;

If you read this far, thank you! And if you have a solution that produces full color circles as in the original whilst using my revised function with argument i.e. randomValue(upper) please let me know.

Thanks all,

Shane

1 Answer

Steven Parker
Steven Parker
231,269 Points

If you call the random function only once, and then use that value for all 3 colors, you will always get a shade of grey. To make the color entirely random, you need to modify the outer function to call the random function 3 times, once for each color:

function randomRGB(value) {
  return `rgb(${randomValue(value)}, ${randomValue(value)}, ${randomValue(value)})`;
}

for (let i = 1; i <= 10; i++) {
  html += `<div style="background-color: ${randomRGB(256)}">${i}</div>`;
}