Unable to load HTML before Javascript

Question

I am new to Javascript, and know how can I load html before javascript is executed.

I did check the questions on stackoverflow and tried to implement the solutions given but none worked.

Following is the code of various code that I tried.

Wrote script tag before the body ends
wrote the javascript code inside a function and called it inside onload of body but it didn't work either. (Also tried to comment documnet.onload = cal(); and execute).

<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>

</head>
<body onload="cal();">
<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script type="text/javascript" src="Age.js"></script>
</body>
</html>

//Javascript code
function cal(){
  var age = prompt("How old are you?");
  var days = age * 365.25;
  alert("You are approx " + days + " days");
}

documnet.onload = cal();

I want the html to be displayed before user is asked How old are you?

Always have your browser console open when developing. That way you would see errors like "Uncaught ReferenceError: documnet is not defined" (FYI, it's document) — Phil
– Phil, Commented Dec 28, 2018 at 4:09
look at developer.mozilla.org/en-US/docs/Web/API/Document/readyState — Mister Jojo
– Mister Jojo, Commented Dec 28, 2018 at 4:18
look at fiddle jsfiddle.net/vks9009/8w24k3xv. This code will also work if long html code — Vindhyachal Kumar
– Vindhyachal Kumar, Commented Dec 28, 2018 at 4:48

CertainPerformance · Accepted Answer · 2018-12-28 04:13:01Z

5

The problem is that prompt and similar functions like alert block the browser - they prevent rendering until the pop-up box has been submitted or canceled.

<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script>
  var age = prompt("How old are you?");
</script>

If you want to make sure the HTML displays before the prompt comes up, you might use setTimeout, giving the browser a chance to paint the HTML before the prompt gets called:

<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script>
  setTimeout(() => {
    var age = prompt("How old are you?");
  });
</script>

But an even better solution would be to use a proper modal, such as an input box with a submit button, which won't block the browser. (best to never use alert, prompt, and confirm if at all possible)

answered Dec 28, 2018 at 4:13

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

4 Comments

krrish Over a year ago

Thank You for your help, but the tutorial which I as seeing had only placed the script tag before body end(</body> and the html was displayed before Javascript. Browser used by tutor and me is Google Chrome Could you please advise if it worked for him then why isin't it working for me. The tutorial might be just a year or two old.

CertainPerformance Over a year ago

Was that tutorial also using prompt? Can you post its link so we can look at it?

krrish Over a year ago

Yes It was, It is from a paid course online so cannot post a link.

CertainPerformance Over a year ago

It must have been doing something other than just having a plain <script> tag followed by the prompt, otherwise you would've seen the same problem you were experiencing.

Shidersz · Accepted Answer · 2018-12-28 05:27:47Z

First of all, I suggest to read this article. Now, based on the source of this document, the best way (using only Javascript) to wait for the document to fully render before executing some code, will be using a listener on the load event of the window element, like this:

window.addEventListener('load', function() {
  // Everything has loaded!
});

I have added an image to your code just to test how this approach waits the image to render before prompt to the user:

<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<img src="https://via.placeholder.com/500?text=Test+Image">

<script>

function cal()
{
    var age = prompt("How old are you?");
    var days = age * 365.25;
    alert("You are approx " + days + " days");
}

window.addEventListener('load', function()
{
    // Everything has been rendered and loaded!
    cal();
});

</script>

Collectives™ on Stack Overflow

Unable to load HTML before Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related