Problem using jQuery on CodePen

Problem using jQuery on CodePen
0.0 0

#1

Hi all,

I have trouble getting jQuery working on codepen,

I’ve added jQuery and jQueryUI in the project parameters, and copied and pasted this challenge code to be sure it’s working : change texte with click events

Yet nothing happen when I click the button,

Do you know what’s going on ?

Here’s the project : codepen project


#2

Hi @magservel

It’s because of the way CodePen loads the scripts/js/html into the DOM.

If you inspect the page when it’s loaded, first of all you’ll see an error in the console that states $ is not defined.

Essentially what’s happening is that the html is loaded into the body (the custom script tag included), then the scripts defined in the project settings are added to the bottom of the body AFTER the html, then the JS is added as a script tag after that.

So your custom script is loaded BEFORE jQuery, which results in the error.

Basically, you just need too move the scripts to the provided JS pane and it will work :slight_smile:


#3

Thanks for your help,

I’ve done so but I still have no reaction after clicking the button,

Also, my console is always empty. Are we talking about the “console” button on the bottom left of the codepen screen ?


#4

Okay, I think I know why.

If you click the settings button for the JS pane, there should be a tick box there called: “Add type=“module” on the Pen’s tag”.

Make sure that’s unchecked, close and try again.

As an FYI, that’s for ES6 modules which is a fairly new feature browsers have started to adopt, I suspect your browser doesn’t support it so the script is being ignored.


#5

@joesmith100, you are wonderful

Thank you :slight_smile: