In Chrome alert doesn't show HTML until pop up is executed

Question

I just started to learn JavaScript and I have a problem with alert. In Chrome alert doesn't show HTML until pop-up is executed.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
    <h1>JavaScript in HTML</h1>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

script.js

alert("Helo!");

That is what happens when you use something that blocks the rendering of the page. You can call it onload to make sure the content is loaded fully. — epascarello, Jul 31 '18 at 16:31
@epascarello But the script is after the rest of the HTML; It's should execute after the HTML loaded. — Chayim Friedman, Jul 31 '18 at 16:35
@ChayimFriedman does not mean that the browser drew the page yet.... — epascarello, Jul 31 '18 at 16:36
Possible duplicate of [How to make the HTML renders before the alert is triggered?](https://stackoverflow.com/questions/40086680/how-to-make-the-html-renders-before-the-alert-is-triggered) — Sebastian Speitel, Jul 31 '18 at 16:37
@ChayimFriedman Your right in thinking that html is written before the javascript but the order of operations in loading browsers is a bit different then whats written top -> bottom. The browser will look at the html file and prepare to render it. Before it renders it though it will run the javascript. — Bromox, Jul 31 '18 at 16:42

Rick · Answer 1 · 2018-07-31T17:06:50.567

Add an event listener to the window object and call alert within the event handler, when the load event occurs:

window.addEventListener('load', function() {
  alert('Helo!');
})

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
</head>
<body>
  <h1>JavaScript in HTML</h1>
  <script>
    window.addEventListener('load', function () {
      alert('Helo!');
    })
  </script>
</body>
</html>

Or add an event listener to the document and use setTimeout with a 0 delay to defer the execution of alert within the DOMContentLoaded event handler:

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    alert('Helo!');
  }, 0);
});

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
</head>
<body>
  <h1>JavaScript in HTML</h1>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      setTimeout(function() {
        alert('Helo!');
      }, 0);      
    });    
  </script>
</body>
</html>

score 2 · Answer 2 · answered Jul 31 '18 at 16:37

2

With reference to @epascarello's comment, you need to add alert on load of an element or window. Something like this. window.onload = function() {alert('hello');};

answered Jul 31 '18 at 16:37

Nik

1,589
2
15
23

score 2 · Answer 3 · answered Jul 31 '18 at 16:39

This alert is blocking the load of the html. Use lifecycles to call the javascript after the html is loaded.

<script>
window.onload = function() {
    alert("hello")
};
</script>

What this code does is checks to see if the browser window is loaded. When this happens you run a function that contains your script.

In Chrome alert doesn't show HTML until pop up is executed

3 Answers3