Running external javascript function from an html file

Question

I have made a bit of research, but not get any result. This is the situation. I have an html file and a javascript file. The html is:

<html>
<head>
<script src="js/calculateRemainigTime.js"></script>
<script>
reservationTime();
</script>
</head>    
<body>
<button onclick = "reservationTime()">Start</button>
<p id="demo">Result Here</p>
</body>

The javascript file is:

function reservationTime()
{
var date = new Date();
var currHour = date.getHours()
var x = document.getElementById("demo");
x.innerHTML = "The example time is: " + currHour;
}

The problem is that when I press the Start button, the text of the "p" tag with id = "demo" does not change. Thanks!

That seems like it should work fine, are you sure the link to the JS file is correct? If not try placing the file in the same directory and setting the src as <script src="calculateRemainigTime.js"></script> — Nunners
– Nunners, Commented Sep 25, 2013 at 13:56
"Are you sure the script file has been loaded successfully?" How to know whether it loaded successfully? — Joel
– Joel, Commented Sep 25, 2013 at 14:05

meobyte · Accepted Answer · 2013-09-25 14:38:00Z

1

In your JS file you have:

var x = document.getElementById("demo");

The problem is the element with "demo" as the id does not yet exist in the DOM when your JS file is loaded. Browsers start executing JS the moment it's loaded and evaluated. And if you put the JS file in your head, then it's doing this before the browser knows about any of the elements in your body.

You can either listen for the DOMContentLoaded event instructing the browser to execute your JS after the DOM has loaded, or move the JS from the head to the end of the body.

answered Sep 25, 2013 at 14:38

meobyte

1,3208 silver badges15 bronze badges

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

1 Comment

Joel Over a year ago

You are right. I just edited that line. I used: getElementById(idName) instead of writing the id("demo") itself.

Brian · Accepted Answer · 2013-09-25 13:53:45Z

0

You don't need this:

<script>
reservationTime();
</script>

answered Sep 25, 2013 at 13:53

Brian

7,6733 gold badges30 silver badges48 bronze badges

Comments

Totoro · Accepted Answer · 2013-09-25 14:22:52Z

0

Try this code:

<html>
<head>
<script>
function reservationTime(testVersion){
    var date = new Date();
    var currh = date.getHours();
    var currm = date.getMinutes();
    var currs= date.getSeconds();
    var x = document.getElementById("demo");
    x.innerHTML = "The example time is: " + 
        currh + " hours, " + currm + " minutes and " + 
        currs + " seconds. The test version is: " + testVersion;
}
reservationTime('pre');
</script>
</head>    
<body>
<button onclick = "reservationTime('click')">Start</button>
<p id="demo">Result Here</p>
<script>
reservationTime('post');
</script>
</body>

Some things to note:

I added a variable 'testVersion' to the function, then I call it in three places, on page load you will see the code with the 'post' note, if you comment out the post line (Put // at the start of the line) you will not see any change, this is because when the 'pre' line of code is read the #demo tag does not exist in the DOM (it gets created as it works through the code from top to bottom) The on click should work, I added seconds so you can see a change every time you click.
Once you confirm the code is working move it back into the external file, You can use a browser tool like chromes Developer tools to make sure the page was loaded (it should come up as a 404 if the file cant be found).

edited Sep 25, 2013 at 14:22

answered Sep 25, 2013 at 14:13

Totoro

1,3042 gold badges12 silver badges23 bronze badges

2 Comments

Joel Over a year ago

The whole file you sent works, but if I separate the script to a .js file, it does not work. Nothing changes when I click.

Totoro Over a year ago

In your question you had the link to the file as 'js/calculateRemainigTime.js' this means that the file will be called 'calculateRemainigTime.js' and it will be in a folder called 'js' which will be in the same folder as the html file you are running. is this the case? if it is, then you need to give some info on the file structure, are you running a server or hust opening the folder from your file system etc

Collectives™ on Stack Overflow

Running external javascript function from an html file

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related