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 Random Quote Generator

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points
Posted by Neil Bircumshaw
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Trying to get random colour every time button is clicked.

Essentially I'm fairly sure I know how to do this (create a function that holds a random number then assign this to 3 separate variables (red, blue,green) then create a string to make sense of it (rgb(<number>,<number>,<number>).

What I'm unsure about is how to the tie this to the DOM (is it called that? haha). specially the background colour of the body.

I tried to research and found this - document.body.style.backgroundColor =

but this didn't seem to help in my code.

My code currently looks like this: 

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

var red = randomRGB();
var green = randomRGB();
var blue = randomRGB();
var rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';   


function getRandomQuote() {
    var random_nub = Math.floor(Math.random() * (quotes.length));
    return quotes[random_nub];

function printQuote() {
  var randomQuote = getRandomQuote();
  var html = '<p class="quote">' + randomQuote.quote + '</p>'
  + '<p class="source">' + randomQuote.source +
  '<span class="citation">' + randomQuote.citation + '</span>'
  + '<span class="category">' + randomQuote.category + '</span>' + 
  '<span class="year_Of_Game">' + randomQuote.year_Of_Game + '</span>' + '</p>';
  html+ = document.body.style.backgroundColor = rgbColor;

  document.getElementById('quote-box').innerHTML = html;
}

1 Answer

Chyno Deluxe
Chyno Deluxe
16,936 Points

There are a few things you'd need to change.

  1. you need to uppercase the 'm' in math.random in your randomRGB().
function randomRGB(){
    return Math.floor(Math.random() * 256);
}
  1. you are missing a closing '}' on your getRandomQuote() function.
function getRandomQuote() {
    var random_nub = Math.floor(Math.random() * (quotes.length));
    return quotes[random_nub];
}
  1. remove 'html' from your document.body call to change the background color.
  html+ = document.body.style.backgroundColor = rgbColor;

//change to
document.body.style.backgroundColor = rgbColor;

Also, im not sure if you are calling your printQuote() somewhere else but that was also not included in your JS code.

Optionally, i'd recommend breaking up your html variable into smaller concatenated blocks of code for better readablity.

    var html = '<p class="quote">' + randomQuote.quote + '</p>';
    html += '<p class="source">' + randomQuote.source;
    html += '<span class="citation">' + randomQuote.citation + '</span>';
    html += '<span class="category">' + randomQuote.category + '</span>';
    html += '<span class="year_Of_Game">' + randomQuote.year_Of_Game + '</span>' + '</p>';

After all the changes above your code should look like below;

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

var red = randomRGB();
var green = randomRGB();
var blue = randomRGB();
var rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

function getRandomQuote() {
    var random_nub = Math.floor(Math.random() * (quotes.length));
    return quotes[random_nub];
}

function printQuote() {
    var randomQuote = getRandomQuote();
    var html = '<p class="quote">' + randomQuote.quote + '</p>';
    html += '<p class="source">' + randomQuote.source;
    html += '<span class="citation">' + randomQuote.citation + '</span>';
    html += '<span class="category">' + randomQuote.category + '</span>';
    html += '<span class="year_Of_Game">' + randomQuote.year_Of_Game + '</span>' + '</p>';

    document.body.style.backgroundColor = rgbColor;
    document.getElementById('quote-box').innerHTML = html;
}

printQuote();

I hope this helps.

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points
Neil Bircumshaw
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Dammit I didn't capitalise the M in Math haha! That embarrassing :P Thank you so much buddy, you're a wiz. Although now that I've input the code, the colour of the background doesn't change each time the button is clicked. I thought it would as it's inside the printQuote function and the function is called via this piece of code at the top that I didn't include the first time:

document.getElementById('loadQuote').addEventListener("click", printQuote, false)

Sorry to ask so much, but at this point in the course they haven't explained much in regards to dealing with the DOM and am finding it a little confusing! Really thankful for your help though :)

Chyno Deluxe
Chyno Deluxe
16,936 Points

You're code is correct for changing the color, however, in order for you to get a different background color everytime the button is pressed and a new quote is loaded, then you'll need to either wrap the red, blue, green and rgbColor variables in a function of its own and call it inside the printQuote() or you can place those line of code inside the printQuote() method itself. Like below.

function printQuote() {

  var red = randomRGB();
  var green = randomRGB();
  var blue = randomRGB();
  var rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

  var randomQuote = getRandomQuote();
  var html = '<p class="quote">' + randomQuote.quote + '</p>';
  html += '<p class="source">' + randomQuote.source;
  html += '<span class="citation">' + randomQuote.citation + '</span>';
  html += '<span class="category">' + randomQuote.category + '</span>';
  html += '<span class="year_Of_Game">' + randomQuote.year_Of_Game + '</span>' + '</p>';

  document.body.style.backgroundColor = rgbColor;
  document.getElementById('quote-box').innerHTML = html;
}

Currently, whats happening is, the variables are only being called once when the program runs, and never again. meaning that it gets a random color when it runs but nowhere else in the code is it being told to fetch a new color.

I hope this helps.