Very simple jQuery function is not working

Question

I have the following code in a .html file, and I am then opening it with a browser. Why do I not receive the "Hello World" alert when the page loads? All I see is the "Test" text.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
            $(document).ready(function() {
            alert("Hello World!");
        });
        </script>
    </head>
    <body>
    <p>
        Test
    </p>
    </body>
</html>

Put your function in an extra script tag. – Sebsemillia Mar 04 '14 at 19:43 — Sebsemillia, Mar 04 '14 at 19:43
hahahaha, the best duplicate I have ever seen! – Phil Mar 04 '14 at 19:53 — Phil, Mar 04 '14 at 19:53

score 2 · Answer 1 · answered Mar 04 '14 at 19:42

You can't declare the [src] attribute and have the contents of a <script> element execute.

You need to use a second <script> element:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        alert("Hello World!");
    });
</script>

NOTE: when using the document.ready callback in jQuery, it's advisable to use the shorthand version to alias jQuery to $ for greater script compatibility:

jQuery(function ($) {
    alert('Hello World');
});

[hmm, this answer feels oddly familiar](http://stackoverflow.com/a/21488173/497418). — zzzzBov, Mar 04 '14 at 19:46

score 1 · Answer 2 · answered Mar 04 '14 at 19:42

1

change it like this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
        $(document).ready(function() {
        alert("Hello World!");
    });
    </script>

answered Mar 04 '14 at 19:42

Anoop Joshi P

25,373
8
32
53

but **why** does that work? – Phil Mar 04 '14 at 19:53

score 0 · Answer 3 · edited Mar 04 '14 at 19:49

<!DOCTYPE html>
<html>
     <head>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script type="text/javascript">           
                $(document).ready(function() {
                    alert("Hello World!");
               });
         </script>
     </head>
     <body>
         <p>Test</p>
     </body>
</html>

With first script tag we LOAD jquery. In second script

score 0 · Answer 4 · answered Mar 04 '14 at 19:46

As some of the answers already stated, you can't have the browser view the src and the contents through one script tag. Here is the W3C information on it:

The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.

http://www.w3.org/TR/html401/interact/scripts.html

Very simple jQuery function is not working

4 Answers4