alert is executing before html loads

Question

Hello my questions is about how a webpage is loaded! Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title> 
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
    alert("Why?");
</script>
</body>
</html>

I cannot for the life of me figure out why the alert is running before the heading is displayed. It is my understanding that since the alert is right above the closing body tag it will be the last thing run. Why is the page waiting for me to close out the alert before displaying the heading?

Thanks for the help!

Edit: I ran this code in firefox rather than chrome and it worked how I wanted it to - the heading displayed first before the alert ran.

Possible duplicate: https://stackoverflow.com/questions/1307929/javascript-dom-load-events-execution-sequence-and-document-ready — Bob, Jul 28 '18 at 19:04
I saw that page before posting, and it is part of the reason I am confused. They say that "javascript is executed as seen". I was understanding that to mean that because the h1 tag is above the script tag, the heading would be parsed and displayed first before the alert pops up. — DougL, Jul 28 '18 at 19:11
fair point, this Q/A drills down much further: https://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page — Bob, Jul 28 '18 at 19:54

score 1 · Accepted Answer · answered Jul 28 '18 at 19:03

1

You need to execute your script after the page loads with

<body onload="script();">

An external script will execute before the page loads.

<body onload="script();">

<h1>Waiting</h1>
<script type="text/javascript">
   function script() {alert("Why?");}
</script>
</body>

answered Jul 28 '18 at 19:03

Melchia

22,578
22
103
117

Thanks for the info.Is this the only way to have the heading be displayed before the alert pops up? – DougL Jul 28 '18 at 19:05
1

I think there are many ways to do it. You can for example use the method setTimeOut() – Melchia Jul 28 '18 at 19:12

Unmitigated · Answer 2 · 2018-07-28T19:28:57.173

You can use setTimeout() to show the alert after a few seconds (when the page should have loaded).

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title> 
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
setTimeout(function(){
    alert("Why?");
}, 1000);//wait 1000 milliseconds
</script>
</body>
</html>

You can check if the header (the h1 tag) is there and only alert if it is there.

<!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript</title> 
    </head>
    <body>
    <h1 id="header">Waiting</h1>
    <script type="text/javascript">
    var x;
    x = setInterval(function(){
        if(document.getElementById("header")){
        alert("Why?");
        clearInterval(x);
        }
    }, 100);
    </script>
    </body>
    </html>

score 0 · Answer 3 · answered Jul 28 '18 at 19:14

The simplest workaround code without using JQuery I could write is this. Please check it.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title> 
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">

    window.onload = function(){ 
        setTimeout(()=>{
            alert("Why?");

        },10)

}
</script>
</body>
</html>

score 0 · Answer 4 · answered Jul 28 '18 at 19:31

0

The cleanest way to do this seems like it would be to put your javascript in a separate file, and load it with the defer attribute. This will cause it to fire after the DOM loads (technically, just before DOMContentLoaded, but it doesn't work consistently across browsers unless there is a src attribute, which is why you would need to move it to an external file.

<script src="myScript.js" defer></script>

Oddly, adding some CSS to your heading could also affect this since JS is supposed to execute in order after any pending CSS.

The timeout function or a $(document).ready() function will do what you need in theory, but a timeout could need to be adjusted based on the complexity of the page, and if you aren't already using jQuery, you probably won't want to add it just to use $(document).ready().

answered Jul 28 '18 at 19:31

ryantdecker

1,754
13
14

very handy quick reference: https://www.html5rocks.com/en/tutorials/speed/script-loading/#toc-quick-reference – ryantdecker Jul 28 '18 at 19:32
I tried adding the defer attribute but the alert still displays before the heading. I found this question from several years ago. I am using chrome - is the browser the issue? https://stackoverflow.com/questions/3952009/defer-attribute-chrome It seems that common practice is to put your scripts at the body of the body to avoid problems like this, but I keep having the issue. – DougL Jul 28 '18 at 19:52
I think there's an issue with my version of chrome. I ran it in firefox and it worked as expected. – DougL Jul 28 '18 at 20:01
could be that the browser support is still buggy, but I thought this one was safe except old IE... For all the shift there seems to be away from jQuery, one thing it did well was normalize all those browser quirks... the .ready() function 'just works', so if you're already including jQuery in your app, this is a spot to use it. – ryantdecker Jul 28 '18 at 23:37

alert is executing before html loads

4 Answers4

Linked

Related