Random Quote Machine - On click event

Random Quote Machine - On click event
0.0 0

#1

I used the code shown in the fcc “challenges” but it doesn’t seem to work in CodePen. What am I missing? Is there something else that is “behind the scenes”, I need to include too? Here’s my code:

<script>
$(document).ready(function() {
    $("#getQuote").on("click", function(){
      var Quote = quotes[Math.floor(Math.random()*10)[0];
      $(".quote").html("Here is the quote");
    });
  });
});
</script>

<div class="container-fluid">
<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-6 text-center">
    <h1>The Random Quote Machine</h1>
  </div>
  <div class="col-md-3"></div>
</div>
<div class="box big_box"> <!-- Box "row"-->
  <div class="row"> <!-- Quote "row-->
    <div class="col-md-2"></div>
    <div class="col-md-8 well quote small_box">
      Quote will go here
    </div>
    <div class="col-md-2"></div>
  </div>
  <div class="row small_box"> <!-- Button "row" -->
    <div class="col-md-6">
      <button id="getQuote" class="btn make_green">Get a new random quote</button>
    </div>
    <div class="col-md-6">
      <button type="submit" class="btn btn-info">Tweet this quote</button>
    </div>
  </div>
</div>
</div>

#2

Check your browser’s console (Ctrl+Shft+J in Chrome) to see any errors. I bet you will find at least two (one syntax issue).

Did you add the jQuery library to your pen settings, because I do not see it in the code you provided?


#3

I have added jQuery (and also Bootstrap). I fixed some issues. But I get " Uncaught ReferenceError: $ is not defined" in the console referring to $(document). I don’t unerstand what this means.


#4

What errors does the browser’s console show?


#5

I accidentally sent the above comment without finishing it.


#6

That typically means you did not load jQuery (or did not load it in the proper order with respect to your custom JavaScript code) to your project. Can you post a link to your Codepen, so I can see the whole project as it is now?


#7

#8

The problem is even though you loaded jQuery, you put jQuery syntax in your html section and Codepen does not load any external libraries until bottom of the body section. The HTML section in Codepen is implemented before the external libraries, so your code is referencing jQuery before it has been loaded.

Codepen tries to make your life easier by creating three separate sections (one for only HTML, one for only CSS and one for only JavaScript). Any external libraries you add (CSS or JavaScript) are incorporated “on-the-fly” and put everything in the proper order, so everything just works.

When you put JavaScript which depends on other libraries inside the HTML section, Codepen let’s you, but then you end up with these issues. To resolve, move delete the script tags from the HTML section and move all the code inside the script tags down below your quotes array in the JS module of Codepen.


#9

Thanks a lot! I would have been stuck on this for hours…