script.js file not linking to index.html

javascript jquery html syntax placement

55,365

Solution 1

To use this you must include both jQuery and surround the javaScript with tags. If, however, you want to include everything in script.js, it might not be the best thing to write everything in tags, just write everything in "script.js"

index.html

<head>
<script src="jquery-1.10.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet'type='text/css'>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="script.js"></script>
</head>

script.js

$(document).ready(function(){
alert("Hello World");
});

This should do the trick. (also remember that if you use this kind of import, you have to place script.js in the same folder. If you placed it in a different folder such as 'js' you have to do a import like:

<script type='text/javascript' src="js/script.js"></script>

Solution 2

You need to put javascript code in <script></script> tags:

<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="script.js"></script>
<script>
    $(document).ready(function(){
      alert("Hello World");
    });
</script>
</head>

And since you are using ready method of jQuery, make sure it is included first before using it with:

<script type="text/javascript" src="jquery.js"></script>

55,365

Author by

Betzyc

Toronto artist trying to improve her coding skills and be a better graphic designer.

Updated on August 20, 2020

Comments

Betzyc over 3 years
I am using sublime and trying to practice building a site. Here's the HTML and JS that I am trying to connect, please tell me what I'm doing wrong because the alert is not coming up when I open index.html in Chrome.
```
 <!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="script.js"></script>
</head>

    $(document).ready(function(){
alert("Hello World");

});
```
Thank you!
- Teemu about 10 years
  
  Where have you added jQuery?
- Betzyc about 10 years
  
  It's written in another file called "script.js" and I want to link to it like the linking to my css file
user3401335 about 10 years

for css except the ; character is all ok. but for js you can use this attributes: src for the logical path of your file js and type that identifies the type of file. if you want add another file js, put another tag script like the other <script type="text/javascript" src="script.js"></script> with this example script is saved in the root of your application
Betzyc about 10 years

I figured it out, here's my final HTML to link to the .js file. <head> <link href='fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="code.jquery.com/jquery-1.11.0.min.js"></script> <script src="script.js"></script> </head> Thanks guys
user3401335 about 10 years

i've modified the response. you cannot add a reference to a file with tag script with file js