/* it won't work because we wrote it before we write the script tag which is responsible to render it */ code example

Example 1: /* it won't work because we wrote it before we write the script tag which is responsible to render it */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Learn JavaScript</title>
    /*
       it won't work because we wrote it before
       we write the script tag which is responsible to render it
      */
    <script>
      // Code One
      document.getElementById("el").style.color = "red";
    </script>
    <script>
      // Code Two
      window.onload = function () {
        document.getElementById("el").style.color = "red";
      };
    </script>
  </head>
  <body>
    <h1 id="el">Page Title</h1>
    <script>
      // Code Three
      document.getElementById("el").style.color = "red";
    </script>
  </body>
</html>

Example 2: /* it won't work because we wrote it before we write the script tag which is responsible to render it */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Learn JavaScript</title>
    <script>
      // Code One
      /*
       it won't work because we wrote it before
       we write the script tag which is responsible to render it
      */
      
      document.getElementById("el").style.color = "red";
    </script>
    <script>
      // Code Two
      window.onload = function () {
        document.getElementById("el").style.color = "red";
      };
    </script>
  </head>
  <body>
    <h1 id="el">Page Title</h1>
    <script>
      // Code Three
      document.getElementById("el").style.color = "red";
    </script>
  </body>
</html>