Skip to content
Advertisement

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

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.

Advertisement

Answer

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>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement