I’m just starting the Intermediate front end projects and was going through the motions of just setting up my first jQuery onclick event. I then hit a hitch when it came to getting the text to change on click. I’ve been literally following the examples in the freecodecamp course and couldn’t see why it didn’t work.
As an experiment I literally copied the code verbatim from the fcc example, this code works perfectly will within the scope of fcc, and it doesn’t work at all in codepen. I’ve got bootstrap included for css and jquery for javascript.
Here’s a link to the html, but it is literally the same code as found on fcc.
http://codepen.io/dj_mousefarm/pen/XKPBQx.html
Any ideas why this won’t work on codepen?
1 Like
I think your issue is that .html should be something different.
I suggest looking up the concepts of innertext or innerhtml
You will have to put the Javascript in the JS section of codepen. So remove the <script></script> tags and put the rest in the JS part.
2 Likes
did u add extension .html ? cause without it it open pen
Also your script in html is loaded before other libs so u can’t refer to $ sign from jQuery…
It will be solved as pointed @BenGitter
I ran this code in codepen and it works as expected. The only issue I can see that may have given you trouble was not including the bootstrap js. You must have both the bootstrap js and bootstrap css for it to work.
Thank you very much! This fixed it nicely. I hadn’t realised that Codepen was fussy about things like this. I had a suspicion that it might be, after all why segregate it anyway, but didn’t try to make any changes to test it. One simple cut and paste later and it’s all good. Thanks! 
I’ll read up on these, after all i’m finding there’s no such thing as trying to understand too much, but this doesn’t seem to be the solution to the problem I was having. Thanks anyway! 
From your response does this mean that a separate .js file will always be run first? Is the optimum way of creating web content? Is there a time and place where embedding a script in html is more appropriate?
I dont know. Usually u put your js-css last to not be overriden by other resources
If u put two versions of jQuery u have function nonConflict from jQuery…
In your real project, the javascript source code will embed in the tag.
And the bootstrap lib will expressed as tag in the front of your html.
1< html>
2< head>
3< link href=“bootstrap/css/bootstrap.css” rel=“stylesheet” type=“text/css”>
Just like the above. So you don’t have to worry about the mechanism of web,
just try it on codepen. The web app developing is not that easy.
1 Like
And I learned in another post on this forum that we need to add the JQuery in settings in CodePen alongside the bootstrap…
Thank you, that worked fine!