为所有内容添加一个外部js文件？

Question

I have an HTML page that I want to perform several lines of js code on. For now I'm just trying one thing:

document.getElementById("title").style.color = "blue";

This is in jsPage.js the within the head of my html page I have

<script src="jsPage.js"></script>

I thought this was all that was necessary. But my title is staying red (this is what it is set to in the css doc attached to html page) instead of turning blue. Am I missing some standard declaration or something in the js file?

Answer 1

Assuming that document.getElementById("title").style.color = "blue"; is in jsCalc.js , you're most likely not changing the text color after the window loads.

The content of jsCalc.js should be

window.onload = function() {
    document.getElementById("title").style.color = "blue";
};

as you cannot change DOM elements before they have loaded.

Answer 2

Likely, since you are loading the js file in the head of your document, the javascript is running before the document is loaded and the title element exists.

There are a couple of ways to deal with it, but the simplest is to move your script declaration to the bottom of your file, instead of the head , so that the script is loaded after the document elements it references.

Vince's answer is another way of ensuring the javascript is run after the elements in question are loaded.

Answer 3

Since the <script> tag is in the head it is getting executed before the body has been rendered, so element "title" does not exist.

There are better ways to do this, but putting the <script> tag just before </body> should work.

Answer 4

As Mentioned by Vince: You should use window.onload so the the code execution will wait till the window is loaded and it makes sure that the DOM is present.

But as an add on it is always a good practice to load javascript in body. Else your page loading will be stuck till that file is fetched.

In some cases js is getting loaded from some other server and its taking time, DOM will also not render.

And, you can keep the scripts in the head itself by using "defer" atrribute on it. This will serve the same purpose. "Defer" makes sure its loaded after everything is done.

Something like:

<script type="text/javascript" scr="page.js" defer></script>