What is the order of execution in HTML with JavaScript?

Question

I am a JavaScript beginner. Could someone explain in what order line1, line2 and line3 are executed in my code? I was thinking it should first show the paragraph in the website (line 1), and then show the picture (line 2), and finally make a prompt.

However what happened is that it first shows the paragraph (line 1) and makes a prompt (line 2). After the prompt gets some input the picture is shown. Why is that?

My code is as follows:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body BGCOLOR = "white">
      <p>paragraph 1</p> <!--line 1-->
      <img name = "img1" src = "http://vignette2.wikia.nocookie.net/ironman/images/e/e3/Iron_man_the_game_1.jpg/revision/latest?cb=20100520163628"> <!--line 2-->
      <script type = "text/javascript">
          var index = parseInt(prompt("enter a number",1));//line3
      </script>
  </body>
</html>

Brian Denomey · Accepted Answer · 2015-04-23 23:30:24Z

It's because the image takes some time to load.

line1, line2, and line3 actually do execute in order, it's just that line 2 is not done retrieving it's image by the time the prompt comes up. and then, the page freezes waiting for that prompt to complete.

if you want to make sure the image shows before the prompt comes up, just do this (note, pure javascript, not jquery, since you are a beginner)

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body BGCOLOR = "white" onload="loadprompt()">
      <p>paragraph 1</p> // line 1
      <img name = "img1" src = "http://vignette2.wikia.nocookie.net/ironman/images/e/e3/Iron_man_the_game_1.jpg/revision/latest?cb=20100520163628"> // line2 
      <script type = "text/javascript">
        function loadprompt(){
                var index = parseInt(prompt("enter a number",1));//line3
    }
      </script>
  </body>
</html>

see here: http://www.w3schools.com/jsref/event_onload.asp

Ola Næss Kaldestad · Accepted Answer · 2015-04-23 23:32:27Z

2

You could use this to make the javascript wait for the rest of the page to load:

<script type = "text/javascript">
  $(document).ready(function() {
    var index = parseInt(prompt("enter a number",1));
  }
</script>

You will then also need to add this, as it uses jQuery (you may download jQuery and put the url to your copy as the src here, if you for some reason want to run your website offline);

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

And you can put all the javascript in the head section, it will wait for the page to load nonetheless.

edited Apr 23, 2015 at 23:32

answered Apr 23, 2015 at 23:25

Ola Næss Kaldestad

1832 silver badges14 bronze badges

4 Comments

Hanlet Escaño Over a year ago

This is using jQuery.

Kai Qing Over a year ago

more importantly it is not explaining why, just giving a solution if it is a problem

Ola Næss Kaldestad Over a year ago

Hanlet, sorry about that, I did an edit now. Kai, I wrote what it does, and it's just one extra line of jQuery in readable English, so I presumed that was enough explanation, sorry about that! I'm new here

halfer Over a year ago

(Ola, when you reply to people, it is usually worth referring to them using their at-name e.g. @hanlet, otherwise they may not get a reply notification. I don't have to for you here however, since you get a notification of everything on your posts automatically).

Community · Accepted Answer · 2017-05-23 12:06:08Z

0

Rendering is typically progressive, so you should see paragraph 1, then if img is loaded it would display, then prompt because you do not run this script on an event, like when the page is done loading.

However, prompt is a UI blocking action. Chances are your image is not yet loaded when the prompt fires. Prompt will cause the browser to just sit there until the user does something, so even if the image loads within the prompt time, it will not display until the UI is unlocked by user action.

See this similar question: Does inline javascript block the UI thread?

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Apr 23, 2015 at 23:23

Kai Qing

18.9k6 gold badges41 silver badges61 bronze badges

Collectives™ on Stack Overflow

What is the order of execution in HTML with JavaScript?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related