CODEWITHSUNDEEP
javascripthtml
Juarez
Juarez

Reputation: 21

JavaScript not working as an external file

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.

Upvotes: 0

Views: 784

Answers (5)

Korvo
Korvo

Reputation: 9714

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.

Upvotes: 0

Katyoshah
Katyoshah

Reputation: 129

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>

Upvotes: 1

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

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>

  1. 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>

Upvotes: 0

James Westman
James Westman

Reputation: 2690

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.

Upvotes: 0

Michael Laffargue
Michael Laffargue

Reputation: 10294

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.

Upvotes: 0

Related Questions