Question: I swear I have included jquery in the page header, it is right there!

Nonetheless the following code, which I've included near the bottom of the page (and inline for now) gives me an error saying "TypeError: $ is not a function."

```
<script>
        function displayResult(longA, latA, longB, latB, units) {
            $("#distance").html(calcDist(longA, latA, longB, latB, units));
            if (units=="m") {
                $("#unitLabel").html("miles");
                $("units").prop("selectedIndex",0);
            } else {
                $("#unitLabel").html("kilometers");
                $("#units").prop("selectedIndex",1);
            }
            $("#longA").val(longA);
            $("#latA").val(latA);
            $("#longB").val(longB);
            $("#latB").val(latB);
        }

        $("#calculateButton").click(function() { //This is the line it's complaining about
            var longA=$("#longA").val();
            var latA=$("#latA").val();
            var longB=$("#longB").val();
            var latB=$("#latB").val();
            var units=$("#units").val();
            displayResult(longA, latA, longB, latB, units);
        })(jQuery);
    </script>

```

Higher up in the page header I've got the following:

```
<script src="jquery.js" ></script>
<script src="calcDistSinglePage.js" ></script>

```

I'm not using Wordpress or anything, this is a very straightforward hand-coded HTML page.

Answer: 
Try wrapping your code in a closure (which is considered good practice anyways):

```
(function($) {
    $("#calculateButton").click(function() {
      // do stuff...
    });
}(jQuery));

```

If this snippet still complains with the same error, there's bound to be a problem with the way you're loading the jQuery library.

Also, make sure that you don't overwrite the `$` variable in your other code. For example, inside `calcDistSinglePage.js`.

The dollar-sign is a very straight-forward javascript variable and can be reassigned to whatever you want. According to the error, `$` currently is *something* but *not* a function (otherwise you'd receive a ReferenceError stating that `$` is undefined). So probably, somewhere in your code, you've overwritten it.
Make sure the **jQuery library** it's the first script you load.

Add this just before the closing `</body>` tag.

```
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>

```

* Download the file locally and inside js/vendor/ add the file.
* Replace the value {{JQUERY\_VERSION}} in the script above adding your jquery version.

Here one CDN you could use.

<https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js>

<https://code.jquery.com/jquery-2.1.3.min.js>