Running Your Code at the Right Time

programming
2

Hey @vmars316! Using alert is often a bit strange in how it interrupts everything else on the page, but if you set a breakpoint and step through the code in the debugger, the order of code running is maintained:

image
image2672×2436 611 KB

You can verify by printing the contents of our h5 element:

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
  <script>
    function pageHasFullyLoaded() {
      alert(document.querySelector("h5").textContent);
    }

    function firstScriptHasCompleted() {
      console.log("2) first Script Has Completed ! ");
    }
  </script>
</head>

<body>

  <h5>Hello World!</h5>

  <script>
    pageHasFullyLoaded()
  </script>

  <script>
    firstScriptHasCompleted()
  </script>

</body>

</html>

If the code ran earlier than when it should, the value of the h5 tag won’t be displayed in the alert :slight_smile:

As for the best place to add listeners, I prefer it at the bottom of the page. The only time might be if I need to intercept some event immediately prior to the page having fully loaded.

For the code commenting question, yes - this comes up enough times where we may need a dedicated sticky topic haha. Here is a collection of the various ways we have on these forums for formatting code: Lists in html - italics

:panda_face: