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

Posted by Eric Essert
Eric Essert
7,816 Points

Can't get random quote generator to run all quotes before repeating the same quote

I am trying to get a random quote generator to display quote only once and not repeat until all other quotes have ran. Any help would be appreciated. Thanks.

here is the code:

function getRandomQuote(){ randNum = Math.floor(Math.random() * famousQuotes.length); randQuote = famousQuotes[randNum]; for (var i=0; i<14; i+=1) if (randQuote !== slicedQuotes && famousQuotes.length > 0){ var slicedQuotes = famousQuotes.slice(randNum, 0); return slicedQuotes; } else { slicedQuotes = []; } }

6 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The definitions of famousQuotes and colorCode are still missing, but the cause of the error is now clear.

:point_right: getRandomQuote is being called on line 1 before viewedQuotes is defined on line 2.

It looks like you may want to move that first line into printQuote anyway.

Also, you won't need this line:

var splicedQuote = [];

"splicedQuote" is a local (string) variable inside getRandomQuote.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

One way would be to create a viewedQuotes list. So now each time you pick a random quote, remove it from the main list and add it to the "viewed" list. Then, before you pick one, if the main list is empty move everything back to the main list.

:point_right: Here's sample code for it:

var viewedQuotes = [];                                          // array to hold viewed quotes

function getRandomQuote() {
  if (famousQuotes.length == 0)                                 // if empty, reload the main list
    famousQuotes = viewedQuotes.splice(0, viewedQuotes.length); // (and empty viewed list)
  var randNum = Math.floor(Math.random() * famousQuotes.length);// pick a quote at random
  var splicedQuote = famousQuotes.splice(randNum, 1)[0];        // take it out of the main list
  viewedQuotes.push(splicedQuote);                              // now add it to the "viewed" list
  return splicedQuote;                                          // return the chosen quote
}

Note that you can still get the same choice twice in a row if the first pick from a fresh list happens to be the same as the last one from the old list.

Eric Essert
Eric Essert
7,816 Points
Eric Essert
Eric Essert
7,816 Points

I would agree that would work, however the splicedQuote variable seems to be undefined. I am getting an error "Uncaught TypeError: Cannot read property 'push' of undefined". I'm assuming that it is a very simple fix however I cannot figure out what it is.

here is the code:

function getRandomQuote(){
  if (famousQuotes.length === 0){
    famousQuotes = viewedQuotes.splice(0, viewedQuotes.length);
  }
  var randNum = Math.floor(Math.random() * famousQuotes.length);
  var splicedQuote = famousQuotes.splice(randNum, 1)[0];
  viewedQuotes.push(splicedQuote);
  return splicedQuote;
}
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

:point_right: It looks like you omitted the first line of my sample code, where viewedQuotes is declared.

Eric Essert
Eric Essert
7,816 Points
Eric Essert
Eric Essert
7,816 Points

I do have it with my other variables labeled as var splicedQuotes = [];

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

:point_right: It's not "splicedQuotes", it's viewedQuotes.

Do you have this line?

var viewedQuotes = [];
Eric Essert
Eric Essert
7,816 Points
Eric Essert
Eric Essert
7,816 Points

Here is the full code:

var randQuote = getRandomQuote();
var viewedQuotes = [];
var splicedQuote = [];
var randNum;
var html ='';
var timedPrint = setInterval(printQuote, 15000);

function getRandomQuote(){
  if (famousQuotes.length === 0){
    famousQuotes = viewedQuotes.splice(0, viewedQuotes.length);
  }
  var randNum = Math.floor(Math.random() * famousQuotes.length);
  var splicedQuote = famousQuotes.splice(randNum, 1)[0];
  viewedQuotes.push(splicedQuote);
  return splicedQuote;
}

function printQuote() {
  var html = '<p class="quote">' + randQuote.quote + '</p>'
  html += '<p class="source">' + randQuote.source + '</p>';
  document.getElementById('quote-box').innerHTML = html;
  randColor();
  document.getElementById('loadQuote').addEventListener("click", printQuote, false);
}

function randColor () {
  var color = ''
  color += colorCode[Math.floor(Math.random() * colorCode.length)];
  document.getElementById('body').style.background = color;
}

getRandomQuote();
console.log(getRandomQuote);
timedPrint;
Eric Essert
Eric Essert
7,816 Points
Eric Essert
Eric Essert
7,816 Points

I have the quotes and the random colors in a separate js file as well as linked them in the html file, making the changes you suggested has fixed the problems. Thanks you so much!!!