Why does my simple script tag break the following script tag?

Question

I am tearing my hair out over this. Why is foo() undefined when I click the button in this script?

<html>
    <body>
        <script type="text/javascript" src="./app2.js"/>
        <script">
            function foo() {
                console.log('foo...');
            }
        </script>
        <button type="button" onClick="foo()" id="testbutton">Click!</button>
        <button type="button" onClick="hello()">Click hello!</button>
    </body>
</html>

but not if I remove the first script tag?

<html>
    <body>
<!--        <script type="text/javascript" src="./app2.js"/>-->
        <script>
            function foo() {
                console.log('foo...');
            }
        </script>
        <button type="button" onClick="foo()" id="testbutton">Click!</button>
    </body>
</html>

My app2.js is just

function hello() {
    console.log('hello');
}

I have tested in Chrome and Safari on macOS. The hello function works as expected.

You can't self close a script tag - see https://stackoverflow.com/questions/69913/why-dont-self-closing-script-elements-work — Pete, Jul 18 '22 at 08:27

score 1 · Accepted Answer · answered Jul 18 '22 at 08:28

1

Auto closing tags are used in React JSX and not in vanilla HTML Replace

<script type="text/javascript" src="./app2.js"/>

with

<script type="text/javascript" src="./app2.js" ></script>

answered Jul 18 '22 at 08:28

RKataria

581
1
5
12

Why does my simple script tag break the following script tag?

1 Answers1