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 Patrick Gribbin
Patrick Gribbin
Courses Plus Student 2,838 Points

Can't get it to show just one quote for first project

I am at the point where I can get it to print a quote when i hit the "show another quote" button but it does not clear the previous quote. Can someone help me out with this? Code is below

----index.html----

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Random Quotes</title> <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <div id="quote-box"> <p class="quote">Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.</p> <p class="source">Patrick McKenzie<span class="citation">Twitter</span><span class="year">2016</span></p> </div> <button id="loadQuote">Show another quote</button> </div> <script src="js/script.js"></script> </body> </html>

-----script.js----

var randomq; var HTML = ' '; //array of quotes. var quotes = [ { quote: 'You know you’re in love when you can’t fall asleep because reality is finally better than your dreams.', source: 'Dr. Suess'

},
{
  quote:'I’m selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can’t handle me at my worst, then you sure as hell don’t deserve me at my best.' ,
  source:'Marilyn Monroe'

},
{
  quote: 'Get busy living or get busy dying.',
  source:'Stephen King '

},
{
  quote:'The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.' ,
  source:'Mark Caine'

},
{
  quote:'When one door of happiness closes, another opens; but often we look so long at the closed door that we do not see the one which has been opened for us.' ,
  source:'Helen Keller'

}

];

//function getting random quote function getRandomQuote(array){ var randomNumber = Math.ceil( Math.random() * quotes.length ) - 1; for (var i = 0; i < quotes.length; i++){ var randomQuote = quotes[randomNumber]; } return randomQuote; };

//function printing out quote with css classes function printQuote( array ){ randomq = getRandomQuote(); HTML += '<p class="quote"> ' HTML += randomq.quote ; HTML += '</p>' HTML += '<p class="source">' HTML += ' ' + randomq.source; HTML += '</p>' document.getElementById('quote-box').innerHTML = HTML; return randomq; };

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

thanks for the help.

Patrick

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down: 
Or watch this video on code formatting.

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Using the concatenating assignment operator ("+=") adds each new quote onto the previous one instead of starting fresh:

function printQuote( array ) {
  randomq = getRandomQuote();
  HTML += '<p class="quote"> '
//     ^
//     note: use = here for fresh quote instead of +=

See my comments above about code formatting for future postings!

Patrick Gribbin
PLUS
Patrick Gribbin
Courses Plus Student 2,838 Points
Patrick Gribbin
Patrick Gribbin
Courses Plus Student 2,838 Points

Steven Parker thank you for the help on this. I am finding very quickly it sometimes takes just one more set of eyes on code to help it make it work.