CODEWITHSUNDEEP
javascripthtml
Gambit2007
Gambit2007

Reputation: 4004

Running order of multiple scripts in an HTML document?

I have an HTML page that i ship to the browser and it contains a couple of script tag.

This is my index.html file:

  <body>
    <div id="app"></div>

    <script src="src/index.js"></script>

    <script>
      window.test = true;
    </script>
  </body>
</html>

And this is my src/index.js file:

<script>

const test = () => {
  if (window.test) {
    console.log("wow!");
  }
};

test();
</script>

In the HTML file, i define window.test after i run the src/index.js. src/index.js will only print to the console if window.test is set to true, but that's being set only after, as the second script.

What is the order in which these scripts will run? Is there a guarantee that window.test will always be set to true "just in time" for the if statement in src/index.js to print wow!?

CodeSandbox: https://codesandbox.io/s/javascript-forked-utgh8?file=/index.html

Upvotes: 0

Views: 510

Answers (2)

jeremy-denis
jeremy-denis

Reputation: 6878

to guarantee that test function is only call after variable is setted why not use a custom event

<script src="src/index.js"></script>

<script>
  window.test = true;
  const event = new Event('test-setted');
  document.dispatchEvent(event);

</script>

and in index.js

<script>

const test = () => {
  if (window.test) {
    console.log("wow!");
  }
};
document.addEventListener('test-setted', function (e) { 
    test(); 
}, false);

</script>

Upvotes: 1

Haim Abeles
Haim Abeles

Reputation: 1021

In JS called from HTML file the order of the scripts are just like their order of writing in this file "always" will be in that order, which means that in your example window.test Will always have a null value in index.js so nothing will be printed in the console

Upvotes: 1

Related Questions