Random Quote Generator-Help

1

I can’t figure out what I did why this isn’t working, can someone spot errors? I know I can use API but I’d rather this way first. Thanks

HTML

<section>
  <div class="card">
 
  <div class="container">
    <h3><b>Quote of the Day</b></h3> 
   <div id="quoteDisplay">
     <p></p><!--Quotes are displayed here -->
    </div>
    <div id="button">
    <button onclick="newQuote()">Get a Quote!</button>
      <script src="javascript.js"></script>
    </div>
  </div>

  
  </div>
</section>

JS

$(document).ready(function(){
var quotes = [
  'Life is what happens to you while you\'re looking at your smartphone.',
  'An emoji is worth 1,000 words.',
  'Beauty is in the eye of the executive producer',
  'Money can\'t buy happiness, but it can buy anti-depressants.',
  'You are what you download.',
  'The revolution will be Tweeted, Liked and Shared',
  'The send button is mightier than the sword.',
  'What doesn\'t kill you makes you wish it did.',
  'The grass is always greener when it\'s covered with money.',
  'If you don\'t have anything nice to say, then say something clever and devastating.',
  'Be nice to nerds, you may end up working for one.',
  'Failure is the condiment that gives success it\'s flavor',
  'It takes less time to do something right than explain why you did it wrong.'
];

 function newQuote(){
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
  }
                  });
2

Haiiiyo!

If I’m not mistaken the cause is because you have everything wrapped inside jQuery’s $(document).ready(), rendering the functions and variables inaccessible by the button element. If you remove $(document).ready() then your code will work as intended.

It is also worth noting that you haven’t actually used any jQuery in your code. Also, with jQuery you can simply select an element with, for example, jQuery("#button").

My guess to the reason that it doesn’t work is because an event executed by a DOM element does not have direct access to anything defined inside the jQuery scope—but don’t take my word for this and I hope that someone with more experience will comment on it! Or you could also research into it and let us know. d:

Good luck! :slight_smile:

1 Like
3

Thanks! I just ended up using an API, I think Google Chrome has an issue.

4

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.