CODEWITHSUNDEEP
javascripthtml
Chinmaya Ranjan Biswal
Chinmaya Ranjan Biswal

Reputation: 39

Javascript executes first then text in body loads later

Why in my browser when i run this first my java script file runs then it loads the text inside body , but when i ran this in stackoverflow javascript snippet tool it runs fine.

var name= prompt("enter your name");
var age= prompt("enter your age");
var pet_name= prompt("enter your fav pets name");

alert("hi "+name+" your age is "+age+"and you love"+pet_name);
console.log("hi "+name+" your age is "+age+"and you love"+pet_name);
<!DOCTYPE html>
<html>
<head>
	<title>testing javascript</title>
</head>
<body>

<h4>Testing of my first java script</h4>

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

</body>
</html>

Upvotes: 2

Views: 415

Answers (3)

traktor
traktor

Reputation: 19301

The behavior is browser specific. A particular browser may wait until the end of a page's input stream has been reached before rendering the page: perhaps a positioned element located near the end of the file might still need to be rendered at the top of the page.

Now popup dialogs in javascript, like alert, confirm and prompt have a synchronous blocking action on script, which can pause HTML parsing until they have been responded to. So browsers such as Chrome, which don't render until page input has been completed, won't show text from above the script block until the prompts have been answered or dismissed.

Browsers such as Firefox which incrementally render pages may show text from above the script block.

The code snippet facility in SO works differently. It processes content from the HTML box, puts it into the output pane, and then processes content from the script panel. So the HTML content appears first.

Snippet code that requires waiting for a window "load" or document "DOMContentLoaded" event is not tested properly using the snippet facility.

The general solution to using popup dialogs after page rendering is (as suggested already) to defer processing the relevant code until after the "DOMContentLoaded" event has been fired on the document or "load" on the window.

Upvotes: 0

house9
house9

Reputation: 20614

I believe this is because alert, confirm and prompt are all 'blocking' functions and they are being called at the same time the rendering is occuring, try putting the code in a setTimeout or document ready:

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code
});

or

var delayedScript = function() {
  // your code
}

setTimeout(delayedScript, 500);

https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt#Notes

Dialog boxes are modal windows; they prevent the user from accessing the rest of the program's interface until the dialog box is closed

Upvotes: 1

SC87
SC87

Reputation: 1

It does appear that your code is executing just fine, so the only conclusion I can think of is that the script tag is not correctly implemented.

Verify that it's name is indeed 'test_1.js', and that it is located in the same location as the file your html is located in.

If it is not, you can use a relative path.

A few other points:

  1. The type javascript is redundant as Javascript is the default scripting language of the web.
  2. You are missing spaces after the age variable and after the 'love' string.

I hope this helps :)

Upvotes: 0

Related Questions