HTML error when including a JavaScript file

Question

This should not at all be difficult but I can't get a simple JavaScript file included in a flat HTML page.

My JavaScript file is as follows:

<script>
  $(document).ready(function() {
  $('div').css('background', 'red');
 });
</script>

HTML code is as follows:

<html>
    <head>
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/init.js"></script>
    </head>
    <title>Song Index!</title>
    <body>
        <div>It's working!</div>
    </body>
</html>

I have confirmed both javascript files are in my js folder.

However, on Chrome I keep getting this error:

Uncaught SyntaxError: Unexpected token < init.js:1

Firefox renders a slightly different error:

SyntaxError: syntax error   <script> init.js (line 1)

I just don't get why it's not working.

SLEEP DEPRAVATION - makes a developer do some dumb things :-) Thanks for all the answers. — sisko
– sisko, Commented Nov 10, 2014 at 15:42

Arun P Johny · Accepted Answer · 2014-11-10 02:59:48Z

3

Since you have script in a separate file the <script></script> is not required.

Your script is included within the html page using a script tag, so within your script file js/init.js there should not be the <script> and </script> parts

 $(document).ready(function() {
     $('div').css('background', 'red');
 });

answered Nov 10, 2014 at 2:59

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Kamal · Accepted Answer · 2014-11-10 03:07:18Z

1

JavaScript file should not containc tag. You javascript should be:

    $(document).ready(function() {
     $('div').css('background', 'red');
   });

Please move your tag in side tag. HTML code should be:

<html>
<head>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/init.js"></script>
    <title>Song Index!</title>
</head>
<body>
    <div>It's working!</div>
</body>

answered Nov 10, 2014 at 3:07

Kamal

1615 bronze badges

Comments

Luc · Accepted Answer · 2014-11-10 03:43:18Z

1

Simply remove the <script> tags from the external JS file:

    $(document).ready(function() {
        $('div').css('background', 'red');
    });

edited Nov 10, 2014 at 3:43

answered Nov 10, 2014 at 3:15

Luc

3,7313 gold badges24 silver badges26 bronze badges

Collectives™ on Stack Overflow

HTML error when including a JavaScript file

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related