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>