Random Quote Machine - On click event

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>

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.

I accidentally sent the above comment without finishing it.

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.

1 Like

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