未捕获的TypeError：$ .simpleWeather不是函数

Question

I am trying to implement simpleWeather.js on my website.

Unfortunately, when I place the html in my website, I get

Uncaught TypeError: $.simpleWeather is not a function

I am referencing simpleWeather.js at the top of my html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>

And it gets loaded on website:

It works perfectly on codepen.io though :/ Any ideas?

EDIT:

My full code looks like this:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
<script type="text/javascript">
   //copied javascript from codepen.io
</script>
<style type="text/css">
   //copied css from codepen.io
</style>
//copied html from codepen.io

Answer 1

Looks to me like you probably have your scripts in the wrong order. Your script tag for jQuery must be before your script tag for simpleWeather. Then your script using simpleWeather must be after that. (If you're using a script loader, you need to ensure that load order.)

Answer 2

Please check order of code...

You have to include library first then you can access that $.simpleWeather() method. code order something like this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
...
...
...
<script>
$.simpleWeather({
    zipcode: '76309',
    unit: 'f',
    success: function(weather) {
        html = '<h2>'+weather.city+', '+weather.region+'</h2>';
        html += '<img style="float:left;" width="125px" src="images/weather/'+weather.code+'.png">';
        html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span></p>';
        html += '<a href="'+weather.link+'">View Forecast &raquo;</a>';

        $("#weather").html(html);
    },
    error: function(error) {
        $("#weather").html("<p>"+error+"</p>");
    }
});
</script>

Answer 3

Try it like this:

jQuery(document).ready(function ($) {
    // your code
});

Also, write the script tag after html and css