I'm just getting started with HTML/CSS/jQuery and I tried starting basic. Currently I have a .html, .css, and .js. My index.html will load the .css but will not load the .js. Is there something wrong with my code?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src=".jpg"/>
</body>
</html>
CSS
img {
position: relative;
left: 100px;
top: 100px;
}
JQuery
$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
case 65:
$('img').animate({left: "-=10px"}, 'fast');
break;
case 83:
$('img').animate({top: "+=10px"}, 'fast');
break;
case 87:
$('img').animate({top: "-=10px"}, 'fast');
break;
case 68:
$('img').animate({left: "+=10px"}, 'fast');
break;
default:
break;
}
});
});
Please help me figure out why this doesn't work. Some additional info, they're all located in the same folder on my desktop. There are no sub folders.
I'm just getting started with HTML/CSS/jQuery and I tried starting basic. Currently I have a .html, .css, and .js. My index.html will load the .css but will not load the .js. Is there something wrong with my code?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="http://i1061.photobucket./albums/t480/ericqweinstein/mario.jpg"/>
</body>
</html>
CSS
img {
position: relative;
left: 100px;
top: 100px;
}
JQuery
$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
case 65:
$('img').animate({left: "-=10px"}, 'fast');
break;
case 83:
$('img').animate({top: "+=10px"}, 'fast');
break;
case 87:
$('img').animate({top: "-=10px"}, 'fast');
break;
case 68:
$('img').animate({left: "+=10px"}, 'fast');
break;
default:
break;
}
});
});
Please help me figure out why this doesn't work. Some additional info, they're all located in the same folder on my desktop. There are no sub folders.
Share Improve this question edited Nov 5, 2015 at 17:40 JGallardo 11.4k12 gold badges87 silver badges99 bronze badges asked May 17, 2013 at 7:02 dazedaze 1312 silver badges10 bronze badges 4- 2 can you provide your directory structure? – ndequeker Commented May 17, 2013 at 7:03
- 1 Make sure that script.js is in same folder as index.html – Darvex Commented May 17, 2013 at 7:04
- Where your script file is located in your project – K D Commented May 17, 2013 at 7:04
- 1 You mentioned $(document).ready in your code. Are you using jquery. If you using jquery you should add jquery library – vinothini Commented May 17, 2013 at 7:05
4 Answers
Reset to default 6You are using jQuery code in your JavaScript file, but do not include the jquery Lib in the HTML.
Add this line (or you can substitute with another link to a hosted jQuery library) before loading your script (assuming you use the current jQuery version - else include the appropriate version):
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
So your <head> should look like this:
<!-- some code -->
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<!-- some code -->
You're not including the jQuery library. Include this in your head:
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
Add jquery from any CDN
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://code.jquery./jquery-latest.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
Your jQuery script is not loading because you did not add the jQuery library before your script in the javascript file. The other answers are fine but I wanted to expand that you can use jQuery from various externally hosted libraries. And you can use any version that you require so long as it is patible with what you are doing.
I personally use CDNJS which hosts a lot of useful javascript libraries. You can visit their site and find jQuery, then pick the version that you want
After you pick the version that you need you will be presented with the option to copy the link, put that in your src
You can either put that in your <head> or before the closing </body>
Example 1
<head>
<!-- meta tags and CSS -->
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
Example 2
<!-- other HTML and content -->
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
It is also very important to note that if you add any other jQuery plugin or library that it should be added after jQuery but before your custom JS file. Do not edit the files with the libraries, add another file, this can be your custom.js, main.js or whatever you want to call it.
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="someplugin.js"></script>
<script type="text/javascript" src="script.js"></script>