Why this code is not working? jQuery inside the HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="jq1.js">
  $(document).ready(function() {
    $("#foo").on('click', function() {
      console.log("Foo element clicked");
    });
  });
  </script>
  <title>Document</title>
</head>
<body>
  <span id="foo">Click me to open an alert!</span>
</body>
</html>

I already try many syntaxes to set up the jQuery inside the HTML, and al of them got error message in console and not working at all, is anyone know why? thank you very much.

Hey there,

You cannot try to load an external script

<script src="jq1.js">

and have what I would imagine being the same script inline and inside the script tags.

If you remove the src part, it will work.

1 Like

thank you very much. After remove it, it solved.

1 Like