Categories
discuss

How do I link my HTML with my jQuery?

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 …

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.

Answer

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.

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..