script.js file not linking to index.html

Question

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!

It's written in another file called "script.js" and I want to link to it like the linking to my css file — Betzyc
– Betzyc, Commented Mar 23, 2014 at 19:45

Sarfraz · Accepted Answer · 2014-03-23 19:37:56Z

3

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>

answered Mar 23, 2014 at 19:37

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

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

Comments

Max Langerak · Accepted Answer · 2014-03-23 19:52:29Z

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>

Alireza · Accepted Answer · 2017-08-19 15:22:03Z

This is very simple stuffs which new people to JavaScript may miss it, there are two ways to do it:

1) in Simple structure of HTML page, everything in the page is counted as HTML unless they are in <script> or <style> tags, so in your case you need to do it inside <script> tag like this:

<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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      alert("Hello World");
    });
  </script>

</head>

<body>
</body>

</html>

2) You may want it in separate file, like the link you did it to script.js, in this case, just simply put the js file in script.js without any <script> tag...

user3401335 · Accepted Answer · 2014-03-24 08:09:33Z

0

add jquery!

download here http://jquery.com/download/ and add in head section

<script src="filejquerywithpath" type="text/javascript"></script>

Howhever if you want include jquery in other file and include only this file, you can add the line code above in a file html and in the head section add this line code that write te content in output

<% Response.WriteFile("file.html"); %>

All content of file.html will be written.

edited Mar 24, 2014 at 8:09

answered Mar 23, 2014 at 19:39

user3401335

2,4152 gold badges23 silver badges37 bronze badges

3 Comments

user3401335 Over a year ago

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 Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

script.js file not linking to index.html

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related