CODEWITHSUNDEEP
javascripthtml
Harshit Jindal
Harshit Jindal

Reputation: 621

External JS not linking to HTML

I have a very simple directory structure with an index.html file and a main.js file at the same level and no other files/folders. But I'm unable to link this js file in my index.html.

I have posted the contents of both files below, and the expected behaviour is to have a simple alert pop-up.

Here is my HTML File: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/main.css" />
        <script type="text/javascript" scr="main.js"></script>
        <title>External JS Issue</title>
    </head>
    <body>
        Some Content Here.
    </body>
</html>

Here is my JS File:
alert("If you can read this, it worked!");

However, if I include this JS line of code and put it directly inside my index.html, it works fine.
Here are the screenshots:

index.html:
index.html

main.js:
main.js

Browser Screenshot with External JS(NOT Working):
Browser Screenshot with External JS(NOT Working)

index.html with inline JS:
index.html with inline JS

Browser Screenshot with Inline JS(Working):
Browser Screenshot with Inline JS(Working)

Upvotes: 2

Views: 178

Answers (1)

geekonaut
geekonaut

Reputation: 5954

You have a typo, the attribute of the <script> tag should be src, not scr.

Upvotes: 3

Related Questions