Cannot import js into html

Question

I am just trying to get into the absolute basics of JS and HTML. Basically I want to execute a super simple js. Here's my test.js file:

document.getElementById("test").innerHTML = "Loaded js file";

Here's my test.html:

<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Testing page</title>

<meta charset="utf-8">
<script type="text/javascript" src="test.js"></script>
</head>
<body>

    <p id="test">Not loaded</p>

</body>
</html>

Both files are located in the same folder. What should happen is that the "Not loaded" text gets replaced by "Loaded js file", but it just doesn't happen. What am I doing wrong?

Yous script is running before the DOM has completed loading, thus the `#test` element does not exist yet. — Eduardo M - bbaaxx, Dec 12 '16 at 21:05
@empiric The original question was tagged with jquery, which you removed after placing that comment; while the question does not use jquery directly in the example, that doesn't mean the OP isn't looking for it.. especially when they themselves tagged their question with it. — Daedalus, Dec 13 '16 at 10:44

score 3 · Accepted Answer · answered Dec 12 '16 at 21:04

This is because the JavaScript loads before the element does. You have two ways.

Quick and Dirty way

Move the JavaScript after the element.

<!DOCTYPE HTML>
<html lang="de">
  <head>
    <title>Testing page</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p id="test">Not loaded</p>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>

Using Event Handler

Or, use document's load event handler in the JavaScript.

$(function () {
  document.getElementById("test").innerHTML = "Loaded js file";
});

Since you are using jQuery, you can keep it in a simple way:

$(function () {
  $("#test").html("Loaded js file");
});

Note: I prefer this method to the above method, as this function gets executed only when the document is loaded fully and it is unobtrusive as well.

score 1 · Answer 2 · answered Dec 12 '16 at 21:05

1

That's because you have to wait until the window has been loaded.

window.onload = function() {
    document.getElementById("test").innerHTML = "Loaded js file";
};

answered Dec 12 '16 at 21:05

Wichard Riezebos

61
4

1

onload event might not work well. The browser fires this event when the structure of the DOM has been parsed but also all resources has been loaded too, like images, css, javascript files. In case you wait for something huge to be downloaded by the browser in a poor network connection scenario you might weight forever. – Sagi Dec 12 '16 at 21:21
@Sagi Then we looking more at a [JQuery equivalent](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) – Wichard Riezebos Dec 12 '16 at 21:24
jQuery uses this event also but also has a fallback mechanism to support older browsers using this trick: https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js – Sagi Dec 12 '16 at 21:36

Sagi · Answer 3 · 2016-12-12T21:14:47.243

The elements of the DOM are parsed in a sequential order.
The script is an element too. In your case the script has been parsed but the p
element has not been parsed yet, because the execution of the script
stops all HTML parsing until it reaches the end of the file.
Therefor your script should be replaced at the bottom of the file in order to query the DOM.

<!DOCTYPE HTML>
<html lang="de">
<head>
   <title>Testing page</title>
   <meta charset="utf-8">
</head>
<body>
   <p id="test">Not loaded</p>
   <script type="text/javascript" src="test.js"></script>
</body>
</html>

or place the script at the top, but wait for the to dom load event

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("test").innerHTML = "Loaded js file";
}, false);

More of an explanation as to why would be nice. – Andrew Ice Dec 12 '16 at 21:07 — Andrew Ice, Dec 12 '16 at 21:07

score 0 · Answer 4 · answered Dec 12 '16 at 21:05

0

Script is loaded before DOM's are ready, when you setting innerHTML, DOM object #test not exist yet.

Solution - wrap js content in function onload:

window.onload = function() {
    document.getElementById("test").innerHTML = "Loaded js file";
};

answered Dec 12 '16 at 21:05

Sojtin

2,601
2
14
29

Cannot import js into html

4 Answers4