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.
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>