Search code examples
javascriptjquerycodepen

JS/jQuery not working in CodePen

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

Solution

  • enter image description here

    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