Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Josias Kabore
seal-mask
.a{fill-rule:evenodd;}techdegree
Josias Kabore
Full Stack JavaScript Techdegree Student 2,652 Points

need some help to make this random quote generator work.

code is not working and I cant find where the problem

// event listener to respond to "Show another quote" button clicks
// when user clicks anywhere on the button, the "printQuote" function is called
//object quotes in an array
document.getElementById('loadQuote').addEventListener("click", printQuote, false);


var quotes = [
    {
        quote: "No matter how old you are, there's always something good to look forward to. ",
        source: " Lynn Johnston",
        citation: " For Better or For Worse",
        year: 2004,
        tag: "Hope"
  },
    {
        quote: " You've got to find what you love and that is as true for work as it is for lovers. Your work is going to fill a large part of your life and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what what you do. If you haven't found it yet, keep looking and don't settle. As with all matters of the heart, you'll know when you've found it.",
        source: " Steve Jobs",
        citation: " Stanford Commencement Adress",
        year: 2005,
        tag: "work"
  },
    {
        quote: " If you have only two pennies left in the world, with the first penny, you should buy rice to feed your family. With the second penny, say the wise Japanese, you should buy a lily. The Japanese understand the importance of dreaming...",
        source: "Japanese Proverb",
        citation: "from Lilies Words and Music: Annie Walker",
        year: 1999,
        tag: "Dream"
  },
    {
        quote: " If you don't like someone's story, write your own",
        source: " Chinua Achebe",
        citation: "Things Fall Apart",
        year: 1958,
        tag: "Change"

  },
    {
        quote: " If you can make a woman laugh, you can make her do anything",
        source: "Marilyn Monroe",
        citation: "Unsourced",
        tag: "Love"
},
    {
        quote: " Have you ever been in love? Horrible isn't it? It makes you so vulnerable. It opens your chest and it opens up your heart and it means that someone can get inside you and mess you up",
        source: "  Neil Gaiman",
        citation: " The Sandman, Vol. 9: The Kindly Ones",
        year: 1989,
        tag: "Love"
    },
    {
        quote: " For every minute you are angry you lose sixty seconds of happiness",
        source: "Julian Germain",
        citation: "Book",
        year: 2005,
        tag: "Happiness"
      },
    {
        quote: "Coincidence is God's way of remaining anonymous",
        source: "Albert Einstein",
        citation: "The World As I See It",
        year: 1931,
        tag: "Coincidence"
        },
];
var showQuotes = [];
var randomQuote;

// Function that will generate randoom quotes
function getRandomQuote() {
    Math.floor(Math.random() * quotes.lenght) = randomQuote;
    var splicedQuote = quotes.splice(randomQuote, 1)[0]
    showQuotes.push(splicedQuote);
    return splicedQuote;
    if (quotes.lenght == 0) {
        showQuotes = quotes;
    };

    // function to print a quote from the array
    function print(quote) {
        var quotes = getRandomQuote();
        var outputDiv = document.getElementById("quote-box");
        outputDiv.innerHTML = quote;
    };
    var message = '<p class="quote">' + quotes.quote + '</p>';
    message += '<p class="source">' + quotes.source + \
        '<span class="citation">' + quotes.citation + '</span>' +
        '<span class="year">' + quotes.year + '</span>'\ +
        '<span tag="tag">' + quotes.tag + '</span>'\
    '</p>';
    print(message);

    var red;
    var green;
    var blue;
    var randomColor;
// function that will create a colors
    function randomColors(){
        red=Math.floor(Math.random()*256);
        green=Math.floor(Math.random()*256);
        blue=Math.floor(Math.random()*256);
        randomColor= red+ green+ blue;
    };

     var nIntervId;

    function changeColor() {
      nIntervId = setInterval(message, 6000);
    };

Moderator edited: Added markdown to the code so that it properly renders in the forums.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi Josias! I took the liberty of adding some markdown to your code so that it displays properly and is easily readable by other students. If you have a moment, take a look at the Markdown Cheatsheet at the :arrow_down: "Add an Answer" section. This will show you how to format your code and text for future posts :sparkles:

3 Answers

Bashir Shafii
seal-mask
.a{fill-rule:evenodd;}techdegree
Bashir Shafii
Front End Web Development Techdegree Student 5,022 Points

Hi Josias, Your eventlistener in the JS file is responding to a click event and calling printQuote function but your function to output the html is simply name print. Could this be the issue?

Tresean Adam
Tresean Adam
6,216 Points

Hey Josias. I noticed in your getRandomQuote function that you misspelled length. That may be what's preventing your quote generator from working.

Josias Kabore
seal-mask
.a{fill-rule:evenodd;}techdegree
Josias Kabore
Full Stack JavaScript Techdegree Student 2,652 Points

I fixed the mistake on "length" but the code is still not working on my text editor.here is my html snippet in case you are wondering that it may come from there.

<!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 id="rgbcolor">

    <div class="container">
        <div id="quote-box">
            <p class="quote"> [quote here] </p>
            <p class="source"> [source here]
                <span class="citation"> [citation here] </span>
                <span class="year"> [year here] </span>
                <span tag="tag">[tag here]</span>
            </p>


        </div>
        <button id="loadQuote">Show another quote</button>
    </div>
    <script src="quotes.js" type="text/javascrpit"></script>
</body>

</html>