Why does my simple script tag break the following script tag? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 7 months ago.

Improve this 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>

JavaScript
​x
 
<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>

JavaScript
 
<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');
}

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

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

Answer

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

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

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

with

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

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

Advertisement

Answer