Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops The Refactor Challenge, Part 2

How to incorporate function into function

I was trying to randomise the numbers but the function fails

var html = '';

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

function randomRGBcolor(){
    return `rgb(randomRGB(), randomRGB(), randomRGB()` //want them to become rgb (xxx,xxx,xxx)
}

for (numOfColor = 1; numOfColor <= 5; numOfColor ++) {

    html += '<div style="background-color:' + 'randomRGBcolor()' + '></div>'; // want to incorporate the function randomRGBcolor()
}
document.write(html);

3 Answers

imo
imo
7,897 Points
// I'll just list all the changed that I made to your code

// Your code
return `rgb(randomRGB(), randomRGB(), randomRGB()`
// Changed code
return `rgb(${randomRGB()}, ${randomRGB()}, ${randomRGB()})`

// Your code (nothing wrong with your code here, its just a personal preference to use for loop like this (Changed code))
for (numOfColor = 1; numOfColor <= 5; numOfColor ++)
// Changed code
for (numOfColor = 0; numOfColor < 5; numOfColor ++)


// Your code
    '<div style="background-color:' + 'randomRGBcolor()' + '></div>';
// Changed code
    `<div style="background-color:${randomRGBcolor()}"><h1>hello</h1></div>`;

Thank you. You made my day - didn't sleep last night to learn this and it's 10:30am in Australia now

imo
imo
7,897 Points

My pleasure. Go rest soon :D

imo
imo
7,897 Points

There you go. I added a <h1> tag so that I can see the text better, but anyways, this should work just like you wanted it Look over the code and see how I was able to achieve that. Compare it to yours and see where you made a few mistakes.

var html = '';

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

function randomRGBcolor(){
    return `rgb(${randomRGB()}, ${randomRGB()}, ${randomRGB()})` //want them to become rgb (xxx,xxx,xxx)
}

for (numOfColor = 0; numOfColor < 5; numOfColor ++) {

    html += `<div style="background-color:${randomRGBcolor()}"><h1>hello</h1></div>`; // want to incorporate the function randomRGBcolor()
}
document.write(html);

can i ask apart from the template literals where the function name randomRGB are surrounded by ${} got to re-visit content about template literals

is there other changes?