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

Frantron Green
Frantron Green
6,989 Points

Random Quote Generator: Refresh Button Not Working

I've been starring at this code for a couple of days now and have been unable to understand why the button is not working. I can refresh the page and a random quote is generated--so I know some of the function is working--but, as mentioned in the title, the button is not working. Could someone please help.

// FSJS - Random Quote Generator

// Create the array of quote objects and name it quotes
var quoteLibrary = [
{
quote: "Life isn’t how many breaths you take, but it’s the moments that take your breath away.",
source: "Will Smith",
citation: "Goalcast"
},
{
quote: "Float like a butterfly, sting like a bee.",
source: "Muhammad Ali",
citation: "USA Today"
},
{
quote: "Success is most often achieved by those who don’t know that failure is inevitable.",
source: "Coco Chanel",
citation: "EveryDayPowerBlog"
},
{
quote: "Blood, Sweat and Respect. First Two You Give, Last One You Earn",
source: "Dwayne Johnson",
citation: "FearlessMotivation"
},
{
quote: "The function of education is to teach one to think intensively and to think critically. Intelligence plus character – that is the goal of true education.",
source: "Dr. Martin Luther King Jr.",
citation: "KeepInspiring.me"
},
{
quote: "Deep into that darkness peering, long I stood there wondering, fearing, Doubting, dreaming dreams no mortals ever dared to dream before",
source: "Edgar Allan Poe",
citation: "The Raven",
year: "1845"
},
{
quote: "You are a good man, with a good heart. And it’s hard for a good man to be a king.",
source: "T'Chaka",
citation: "Black Panther",
year: "2018"
},
{
quote: "Don’t ever let somebody tell you you can’t do something, not even me. Alright? You dream, you gotta protect it. People can’t do something themselves, they wanna tell you you can’t do it. If you want something, go get it. Period.",
source: "Chirs Gardner",
citation: "The Pursuit of Happyness",
year: "2006"
},
{
quote: "All we have to decide is what to do with the time that is given to us.",
source: "Gandalf",
citation: "Lord of the Rings: The Fellowship of the Ring",
year: "2001"
},
{
quote: "Great men are not born great, they grow great.",
source: "Mario Puzo",
citation: "The Godfather",
year: "1972"
}
];


// Create the getRandomQuote function and name it getRandomQuote
function getRandomQuote( array ){
    var numberOfQuotes = array.length;
    var randomNumber = Math.floor(Math.random() * (numberOfQuotes));
    for(var i = 0; i < numberOfQuotes; i++){
        var randomQuote = array[randomNumber];
    }       
return randomQuote;
};

// Create the printQuote function and name it printQuote
function printQuote( array ){
    var quoteChoosen = getRandomQuote( array );
    console.log(quoteChoosen);
    var quoteConcate = '';
    quoteConcate += '<p class="quote">' + quoteChoosen['quote'] + '</p>';
    quoteConcate += '<p class="source">' + quoteChoosen['source'];
    if( quoteChoosen['citation'] ){
        quoteConcate += '<span class="citation">' + quoteChoosen['citation'] + '</span>';    
    };

    if( quoteChoosen['year'] ){
        quoteConcate += '<span class="year">' +quoteChoosen['year'] + '</span>';
    };
    quoteConcate += '</p>';

    document.getElementById('quote-box').innerHTML = quoteConcate;
    console.log(quoteConcate);
};

printQuote(quoteLibrary);

// This event listener will respond to "Show another quote" button clicks
// when user clicks anywhere on the button, the "printQuote" function is called

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

Thanks!

Moderator edited: edited the markdown to have JavaScript highlighting.

2 Answers

According to this addEventListener page when passing parameter values, use an "anonymous function" that calls the specified function with the parameters.

So instead of this:

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

use this:

document.getElementById('loadQuote').addEventListener("click",function() { printQuote(quoteLibrary)},false);
Frantron Green
Frantron Green
6,989 Points

Thanks Kris! Works perfectly!