Search code examples
javascriptquotes

How to use JavaScript to generate random quotes on a website?


Below is the code I currently have. The problem I'm having is that where the quotes are supposed to be shown on the web page, it is just saying "undefined". I honestly am not sure where the problem is coming from.

var randomQ = randomInt(0, 10);

function randomInt(lowest, size) {
    Math.floor(Math.random() * size) + lowest;
    return randomQ;
}

var quoteElem = document.getElementsByTagName("quote")[0];

quoteElem.innerHTML = getQuote(randomQ);

function getQuote(n) {
   var quotes = [
   "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.",
   "I hate to hear you talk about all women as if they were fine ladies instead of rational creatures. None of us want to be in calm waters all our lives.",
   "Silly things do cease to be silly if they are done by sensible people in an impudent way.",
   "Give a girl an education and introduce her properly into the world, and ten to one but she has the means of settling well, without further expense to anybody.",
   "Life seems but a quick succession of busy nothings.",
   "Our scars make us know that our past was for real.",
   "I cannot speak well enough to be unintelligible.",
   "One cannot be always laughing at a man without now and then stumbling on something witty.",
   "Men were put into the world to teach women the law of compromise.",
   "The person, be it gentlemen or lady, who has not pleasure in a good novel, must be intolerably stupid."
   ];
   
   return quotes[n];
}


Solution

  • You should learn to read your errors. undefined what?

    "message": "Uncaught TypeError: Cannot set property 'innerHTML'

    This means you're trying to set the innerHTML of an element that can't be found/doesn't exist.

    var quoteElem = document.getElementsByTagName("quote")[0];
    

    In HTML, there is no element tag called 'quote'. Perhaps you mean an element with an ID of 'quote' ?

    Secondly, your function called randomInt() wasn't returning the random number you generated, but rather some undefined variable called 'randomQ'

    var randomQ = randomInt(0, 10);
    function randomInt(lowest, size) {
      //Return the actual value instead
      return Math.floor(Math.random() * size) + lowest; 
    
      //return randomQ  <-- what is this? This is what is undefined
    }
    
    var quoteElem = document.getElementById("quote");
    
    quoteElem.innerHTML = getQuote(randomQ);
    
    function getQuote(n) {
       var quotes = [
       "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.",
       "I hate to hear you talk about all women as if they were fine ladies instead of rational creatures. None of us want to be in calm waters all our lives.",
       "Silly things do cease to be silly if they are done by sensible people in an impudent way.",
       "Give a girl an education and introduce her properly into the world, and ten to one but she has the means of settling well, without further expense to anybody.",
       "Life seems but a quick succession of busy nothings.",
       "Our scars make us know that our past was for real.",
       "I cannot speak well enough to be unintelligible.",
       "One cannot be always laughing at a man without now and then stumbling on something witty.",
       "Men were put into the world to teach women the law of compromise.",
       "The person, be it gentlemen or lady, who has not pleasure in a good novel, must be intolerably stupid."
       ];
       
       return quotes[n];
    }
    <div id="quote"></div>