toastr is not defined

ontheroadmike picture ontheroadmike · Apr 6, 2015 · Viewed 38.3k times · Source

Receiving the following error in developer console when loading the page:

Uncaught ReferenceError: toastr is not defined

Here are the html contents. Can someone please explain to me why toastr is undefined?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>

<body>
  <p>Toastr TEST</p>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
  </script>
  <script scr="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js">
  </script>
  <script>
    $(document).ready(function() {
      console.log("document.ready");
      toastr.info('document.ready');
    });

    $(window).load(function() {
      console.log("window.load");
      toastr.info('window.load');
    });
  </script>
</body>

</html>

Answer

DrCord picture DrCord · Apr 6, 2015

You have the script elemen's src attribute wrongly spelled for the toaster.js file, it should be "src" but is "scr".