JavaScript not working as an external file

Question

I'm new to HTML, JavaScipt and everything related to programming, and I'm trying to create a simple page.

Now, I'm stuck with the following problem: I want to change the date of my main.html file, but the main.js is not working. I've already change the <script> position to inside the <body>, after the </span> and even after the </body>, without success. If the content of the main.js is within the HTML it works fine, but as a external file it doesn't.

Here is my main.html:

<!DOCTYPE html>
<html>
    <head>
        <link href="main.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="main.js"></script>
        <title>Page 1</title>
    </head>
    <body>
        <p>WRF<br>
        <span id="data">18/09/1987</span></p>
    </body>
</html>

My main.js is just:

document.getElementById("data").innerHTML = "JUBA";

I've looked through the internet and through this forum, but all answers that I've found did not worked.

The files are on the same directory and the main.css works fine.

Thank you in advance.

score 1 · Answer 1 · edited Nov 24 '14 at 14:25

1

At time you call main.js element #data was not created in DOM tree. You can fix this by putting the link to your Javascript file right before closing the body like this:

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

edited Nov 24 '14 at 14:25

skobaljic

9,379
1
25
51

answered Nov 24 '14 at 13:43

Katyoshah

129
10

Didn't do it. Thanks anyway =] – Juarez Nov 24 '14 at 13:48
It has to do it Juarez, you must be having other errors in script. – skobaljic Nov 24 '14 at 14:39

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Document Object Model (DOM) is not "READY".

Try use onload event, inside main.js:

window.onload = function() {
     document.getElementById("data").innerHTML = "JUBA";
};

If needs more "fast" than onload, use jquery with $(document).ready:

html:

<link href="main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="main.js"></script>

main.js:

$(document).ready(function() {
  $("#data").html("JUBA");
});

window.onload vs $(document).ready()

Answer by @Guffa:

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

edited May 23 '17 at 12:05

Community

1
1

answered Nov 24 '14 at 13:41

Protomen

9,471
9
57
124

Inside the main.js, right? Well, it didn't worked. Thanks for the help. – Juarez Nov 24 '14 at 13:44
@Juarez Yes, into main.js file :) – Protomen Nov 24 '14 at 13:44
Nothing yet, @Guilherme... The problem is that the date will be automatically updated latter, thats why I want this on a separate file, otherwise it will be to many things on my html (well, to me at least hehehehe). – Juarez Nov 24 '14 at 13:54
@Juarez Explain please, what does not work? The console emits an Error? – Protomen Nov 24 '14 at 14:00
No, it just not changes the date to JUBA – Juarez Nov 24 '14 at 14:02
@Juarez So you want to change exactly "what"? This is not in your question, is just that the code did not work. Please add details in your question. What exactly "" must receive? I wait Thanks! – Protomen Nov 24 '14 at 14:03
Your answer was right, I was missing a symbol on the main.js, Thanks a lot, @Guilherme. – Juarez Nov 24 '14 at 14:05
@Juarez Ok, I wish you much success in your projects :) – Protomen Nov 24 '14 at 14:06

score 0 · Answer 3 · answered Nov 24 '14 at 13:42

0

The element is not yet accessible when you run the script. Either you can put the script at the end of the page or delay the execution.

answered Nov 24 '14 at 13:42

Michael Laffargue

10,116
6
42
76

score 0 · Answer 4 · answered Nov 24 '14 at 13:44

0

You could put the JavaScript in the <body> tag after the rest of the page. When the browser loads it, the <span> will already be there to be edited.

answered Nov 24 '14 at 13:44

James Westman

2,680
1
15
20

score 0 · Answer 5 · answered Nov 24 '14 at 13:54

As per your code the script will be called first then page will be loaded, therefore when the script is running there will not be any element having id data because yet page have to be loaded. There are many ways to achieve what you need. 1. Add a script tag before or after end of body like

or

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

Write .js file above before body i.e. in head tag and write the whole javascript code in onload method.

window.onload=function(){ document.getElementById("data").innerHTML = "JUBA"; };

window.onload=function(){
document.getElementById("data").innerHTML = "JUBA";
};

 <p>WRF<br>
        <span id="data">18/09/1987</span></p>

Putting it on the html works, but as I've said to @Guilherme: The problem is that the date will be automatically updated latter, thats why I want this on a separate file, otherwise it will be to many things on my html (well, to me at least hehehehe). — Juarez, Nov 24 '14 at 14:01

JavaScript not working as an external file

5 Answers5

window.onload vs $(document).ready()