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

Brian Ball
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brian Ball
Treehouse Project Reviewer
Posted by Brian Ball
.a{fill-rule:evenodd;}techdegree seal-36
Brian Ball
Treehouse Project Reviewer

Help with RandomQuote generator

How do I get my getRandomQuote to post to the page?

I am trying to get my printQuote to display the final HTML string to the page.

// FSJS - Random Quote Generator
// Create the array of quote objects and name it quotes

var quotes = [ /* Five quotes stored in a function */
  {
    quote: "Theatricality and deception, powerful agents to the uninitiated.",
    source: 'Bane',
    year: 2012
  },
  {
    quote: "No, I am your father.",
    source: 'Darth Vader',
    year: 1980
  },
  {
    quote: "Yes we can.",
    source: 'Barack Obama',
    year: 2008
  },
  {
    quote: "Dude, what do you know about Romona Flowers?",
    source: 'Scott Pilgrim',
    year: 2010
  },
  {
    quote: "Just keep swimming. Just keep swimming. Just keep swimming, swimming, swimming. What do we do? We swim, swim.",
    source: 'Dory',
    year: 2003
  },
  {
    quote: "I'm going to make him an offer he can't refuse.",
    source: 'The Godfather',
    year: 1972
  }
];

// getRandomQuuote function

function getRandomQuote(array) {
  var RandomQuote = quotes[Math.floor(Math.random()*quotes.length)]; /* Selects random quote from the quotes array.*/
  return (RandomQuote); /* Returns the randomly selected quote object. */
}

// printQuote funtion

function printQuote() {
  var actualQuote = getRandomQuote(quotes); /* printQuote function calls getRandomQuote */
  var stringOfQuoteProperties = "";
    stringOfQuoteProperties += "<p class="quote"> actualQuote.quote </p> + <p class="source"> actualQuote.source + actualQuote.year </p>"
  if (actualQuote.year.hasOwnProperty()) {
    stringOfQuoteProperties += "<span class="year"> actualQuote.year </span>";
  } else {} /* adds year property of quote, if there is one */
}

  document.getElementById('quote-box').innerHTML = stringOfQuoteProperties; /* printQuote function should display the completed HTML */

// 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(), false);

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

  1. If you open the javascript console you'll see stringOfQuoteProperties here is undefined because it is outside the function where it is declared 

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

  2. I think you also have issues with concatenation for stringOfQuoteProperties

  3. For external function printQuote you don't use the parentheses here:

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

    Anyways here is some modified code that I got to work:

// printQuote funtion

function printQuote() {
  console.log("clicked")
  var actualQuote = getRandomQuote(quotes); /* printQuote function calls getRandomQuote */
  var stringOfQuoteProperties = "";
    stringOfQuoteProperties += "<p class='quote'>" + actualQuote.quote +"</p> <p class='source'>" + actualQuote.source + " " + actualQuote.year + "</p>"
  if (actualQuote.year.hasOwnProperty()) {
    stringOfQuoteProperties += "<span class='year'>" + actualQuote.year + "</span>";
  } else {} /* adds year property of quote, if there is one */

  document.getElementById("quote-box").innerHTML = stringOfQuoteProperties; /* printQuote function should display the completed HTML */

}



// 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, false);