ReferenceError: function not defined... unable to fix.

ReferenceError: function not defined... unable to fix.

hey guys!!
 i am having a ReferenceError:openPage() is not defined in my error console of the browser.i can not figure it out. help me please.the code is:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5. <link rel="stylesheet" href="./style.css" type="text/css"/>
  6. <script language="Javascript" type="text/javascript">
  7. function getUrlVars() {
  8.     var vars = {};
  9.     var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
  10.         vars[key] = value;
  11.     });
  12.     return vars;
  13. }
  14. $('#addtocart').on('pageshow', function(event) {
  15.     var proid=getUrlVars()["productid"];
  16.     alert(proid);
  17. });
  18. openPage=function(){
  19. location.href="http://localhost:8080/magento/index.php/checkout/cart/add?"+proid+"&qty;=1";
  20. }
  21. </script>
  22.     <title>ADD TO CART</title>
  23. </head>
  24. <body>
  25. <div id="addtocart" data-role="page" data-add-back-btn="true">
  26.     <div class="header">
  27.       <h1 class="page-tile">HI-AT & SAFERTECH</h1>
  28.     </div>
  29.     <div class="body">
  30.         <p class="description" contenteditable="true">DO YOU REALLY WANT IT TO ADD TO CART</p>
  31.         <div class="loginregister">
  32.            
  33.              <a id="add" href="javascript:openPage()">yes</a>
  34.             <a  class="back" href="#" onClick="history.back();">cancel</a>
  35.         </div>
  36.  </div>
  37.     <div class="footer">
  38.         <hr />
  39.       
  40.     </div>
  41. </div>
  42. </body>
  43. </html>