How do I link my HTML with my jQuery?

Question

Firstly sorry for the post, I'm pretty new to coding, I'll try and keep it short and sweet.

Simply put, when I include my jQuery code inline, I.E. beneath my HTML, it works fine - the element I am trying to animate 'hides' and then 'shows' as it should.

However, when I make my own separate jquery.js file and put the code in there, it fails to render.

I've got the cdn script from google and included that, alongside a script and src to where my file is located inside my project folder, but still no luck.

Inside my project folder I have a 'script.js' folder, and then within that a 'jquery.js' file.

Here's the code:

<head>

  <link rel="stylesheet" type="text/css" href="css/style.css"/>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

  <script src="script.js/jquery.js"></script>

</head>

<div class="content">
  <h2> Hi there</h2>
  <h3> Take a look...</h3>
</div>

Here's the jQuery:

<script>

$(document).ready(function() {

$(".content").hide(1000).show(1000);

});

</script>

(Upon 'inspecting' the problem in chrome I get an error which says "jquery.js:1 Uncaught SyntaxError: Unexpected token <) - But I can't see where I am mis-using a '<'.

Thanks in advance, and please feel free to tell me if I have left out anything important.

@AliSheikhpour I think it's just a that he wants to do jQuery but doesn't realise that by doing <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> it already works the way he wants to. Also yes. Folder name is probably the issue — MrKickkiller
– MrKickkiller, Commented May 31, 2016 at 22:03
They're not implementing jQuery two times, they just decided to name their custom script file jquery.js which could be confusing. Folder name is not the issue. — APAD1
– APAD1, Commented May 31, 2016 at 22:04
Just a side note: if you want to load jquery and make sure it is loaded (that's what it looks like), or otherwise use the local version, check out html5 boilerplate's solution: <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.2.min.js"><\/script>')</script> — Randy
– Randy, Commented May 31, 2016 at 22:05

APAD1 · Accepted Answer · 2016-05-31 22:05:57Z

12

You need to remove the <script> tags from your jquery.js file, those are HTML tags that are used for implementing inline JS, the error you are getting is because those tags are not valid JavaScript. Your JS file should just look like this:

$(document).ready(function() {
    $(".content").hide(1000).show(1000);
});

As far as folder naming, there's nothing wrong with having a period in your folder name, but as others have suggested it would probably be a good idea to remove the .js part from your folder name even though it's not technically wrong and not what is causing your issue.

edited May 31, 2016 at 22:05

answered May 31, 2016 at 22:00

APAD1

13.7k8 gold badges47 silver badges72 bronze badges

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

2 Comments

skoster7 Over a year ago

Perfect! Thank you so much. Will mark as my answer in about 3 minutes haha!

APAD1 Over a year ago

No problem at all, happy to help!

SLK · Accepted Answer · 2016-05-31 22:00:34Z

-5

Don't call your folder script.js, just call it "script".

answered May 31, 2016 at 22:00

SLK

213 bronze badges

1 Comment

Randy Over a year ago

Download all of them? I prefer the cdn because it gets cached 😉 if you visited another site with the same cdn, most browsers don't download it again. Saves mobile data.

Collectives™ on Stack Overflow

How do I link my HTML with my jQuery?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related