HTML is not reading external Javascript file

Question

I am trying to write a very simple HTML page that displays a message generated by a JS file. I am somewhat new to HTML / JS and I am certain there is something pretty simple I am missing, but I cannot for the life of me get the page to read the script. When I load the page, it is completely BLANK without any errors in the inspector.

This is the project folder structure:

-Project (folder)
--templates (folder)
----home.html
--src (folder)
----home.js
--styles (folder)
----home.css

Also, I'm pretty sure that my HTML page SEES the script, because when I remove or rename the script, I get an error in the browser's inspector telling me that it cannot find the script. So it SEES the script, it just is not running it for some reason.

Here is the code...

home.html:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../styles/home.css"></link>
        <script type="type/javascript" src="../src/home.js"></script>
    </head>
    <body>
        <div id="bodytext"></div>
    </body>
</html>

home.js:

(function() {
    console.log("I AM READING THE SCRIPT");
    document.getElementById('bodytext').innerHTML = "I AM READING THE SCRIPT";
})();

Could some generous soul out there please clue me in to what extremely simple mistake I'm making?

Thank You!

leo.fcx · Accepted Answer · 2016-01-28 22:10:53Z

3

Value for type attribute should be text/javascript as follows:

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

answered Jan 28, 2016 at 22:10

leo.fcx

6,4972 gold badges23 silver badges37 bronze badges

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

3 Comments

SemperCallide Over a year ago

Yes! I knew it had to be a stupid typo or something. Thank you!!

Joseph Marikle Over a year ago

Or no type at all making it just <script src="../src/home.js"></script>. assuming OP is using the HTML5 spec.

romellem Over a year ago

Like others have said, I'd remove the type attribute alltogether. The HTML5 has it marked as optional, w3.org/TR/html5/scripting-1.html#attr-script-type, and I believe it was also deprecated.

Hatchet · Accepted Answer · 2016-01-28 22:13:46Z

2

Your script is running before the DOM is completely done loading. If you put your <script> tag right before your closing body tag (</body>), it will run after the DOM is loaded, and you will be able to traverse the DOM like normal.

answered Jan 28, 2016 at 22:13

Hatchet

5,4161 gold badge35 silver badges43 bronze badges

Comments

PPK · Accepted Answer · 2016-01-28 22:34:15Z

0

Value for type attribute should be text/javascript as follows

enter code here

ALong with this you will have to change your java script code as follows, so that script gets executed only when page is completely loaded & document object is availabe.

window.onload = function() {
     console.log("I AM READING THE SCRIPT");
    document.getElementById('bodytext').innerHTML = "I AM READING THE SCRIPT";
};

answered Jan 28, 2016 at 22:34

PPK

112 bronze badges

Comments

ask4jubad · Accepted Answer · 2022-06-03 20:54:17Z

0

What worked for me was adding charset="utf-8" to my css link as well as my javascript script (for me, both did not work). Example:

<link rel="stylesheet" type="text/css" href="css/main.css" charset="utf-8"></link>

<script src="javascript/script.js" charset="utf-8"></script>

edited Jun 3, 2022 at 20:54

answered Jun 3, 2022 at 20:49

ask4jubad

331 silver badge7 bronze badges

Collectives™ on Stack Overflow

HTML is not reading external Javascript file

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related