JS/jQuery not working in CodePen

Question

I'm on CodePen, trying to practice using JS and jQuery in conjunction with HTML.

HTML:

<button>asdasads</button>

JS:

$('button').on('click', function() {
    alert('woot');
});

Link to the pen, which doesn't work.

It's meant to display an alert when the button is clicked. But it does nothing.

Here's another one, with the same HTML/JS. The only difference is that I edited this second one out of a "make this paragraph disappear by clicking a button" example CodePen pen.

This CodePen pen works 100%.

which works just beatifully. The code is identical. What is going on here? I cannot find anything on Google, there's no mention of having to configure CP in any way to make your JS mingle with your HTML.

Then again... As a child there was a room in my parent's house that was being renovated and the floor was gone, leaving a fall to the basement. I played a game of opening and closing a door to the room, pretending to be surprised that the floor was gone. Until one time I actually forgot and ran in (yes, I fell), and that was only like the 4th time I opened the door. So, yeah.

Thank you in advance. This is my first go at asking here. Be gentle! :E

You need to include jquery as an external library.

Nick
– Nick

2017-10-15 18:51:44 +00:00
Commented Oct 15, 2017 at 18:51 — Nick
– Nick, Commented Oct 15, 2017 at 18:51
Thank you, snapjs, as well. This was correct.

Jaakko Pöntinen
– Jaakko Pöntinen

2017-10-15 18:55:11 +00:00
Commented Oct 15, 2017 at 18:55 — Jaakko Pöntinen
– Jaakko Pöntinen, Commented Oct 15, 2017 at 18:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

You need to add the jQuery library to the Pen. Just click the gear in the JS block, then click Quick Add, like in this photo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 15, 2017 at 18:52

Pato Salazar

1,48712 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaakko Pöntinen Over a year ago

Thank you. This is not only correct but instructive as well. I'd love to mark this as correct; however I promised to mark Indent's answer as the correct one.I asked him if I could choose this as correct instead. Shows that I shouldn't be so hasty... :)

Indent · Accepted Answer · 2017-10-15 18:50:56Z

1

You need add JQuery (Add External JavaScript)

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

answered Oct 15, 2017 at 18:50

Indent

5,0171 gold badge22 silver badges39 bronze badges

3 Comments

Jaakko Pöntinen Over a year ago

Your answer was indeed correct, but Pato Salazar answered more thoroughly. I said I will mark your answer as correct, but you know what? I'm not sure what to do here. Stackoverflow is filled with comments about some other answer deserving to be marked the correct answer. While yours is correct, the one below is even better. Could I have your permission to mark the mentioned other answer as correct?

Pato Salazar Over a year ago

it is fine... don't worry about it @JaakkoPöntinen

Indent Over a year ago

It' s ok for me too. You can mark Pato Salazar answer.

Collectives™ on Stack Overflow

JS/jQuery not working in CodePen

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related