javascript defines scope by script tags?

Question

Never met this problem, and don't know why. The only explanation is a scope issue.

In the same page, I have 2 sections of JS :

...
 <script type="text/javascript">
    go();
  </script>

  <script type="text/javascript">
    function go()
    { alert('');  }
  </script>
...

This will show an error : go is not defined

where

...
     <script type="text/javascript">
        go();

        function go()
        { alert('');  }
      </script>
    ...

is working (obviously).

Does <script> tag creates a scope of JS ? help ?

Answer 1

This isn't a scope issue. If you define a function (in the global scope) in one script element, then you can use it in another.

However, script elements are parsed and executed as they are encountered.

Hoisting won't work across script elements. A function defined in a later script element won't be available during the initial run of an earlier script element.

You either need to swap the order of your script elements, or delay the function call until after the script that defines it has run (e.g. by attaching it to an onload event handler).

<script>
    function go() {
        alert('');  
    }
</script>
<script>
    go();
</script>

or

<script>
    window.addEventListener("load", function () { 
        go();
    }, false);
</script>
<script>
    function go() {
        alert('');  
    }
</script>

Answer 2

The html parser stops to execute your script before moving to next elements. So the next script element is not executed until the first one is executed.

This is comparable to:

<script>
document.getElementById("hello") //null because the html parser hasn't met the div yet.
</script>
<div id="hello"></div>