[Solved] jQuery Unresponsive in Codepen - Random Quote Machine

1

I’m currently working on the Random Quote Machine Project. My pen is here.

When I click on the button labeled ‘New Quote’, I want "Foo" to be printed to the console, but it isn’t. The console’s not yelling at me either. Does anyone know what I’m doing wrong?

2

Hey. Move your javascript in the JS Panel (the <script> tag isn’t necessary there). By having it in the HTML panel, you are not allowing jQuery to be defined before your script runs.

Also, you do have an error in your console (which explains exactly what I just told you):

Uncaught ReferenceError: $ is not defined
1 Like
3

Thanks, it works fine now.

Why did the loading the js with the html work in this example?

4

It’s just a matter of when jQuery has been loaded. Codepen puts scripts (like jQuery) at the end of your <body> tag as you can see in this image:

010cf4ec9299b0196c3d163f12c68433.png722×226 9.54 KB

Then, you can see the code you are writing in the JS panel. Before, your code was at the beginning of the <body> tag, while jQuery was still down there.

1 Like