PRBLEM IN JQUERY alert() AND OTHER STUFF

PRBLEM IN JQUERY alert() AND OTHER STUFF

Hey every one!!

I have a html page having to anchor tags and a script which gets url variable and one of the anchor tag work with that variable and other anchor is just like a back button.the issue is the alert function in the script is not working i.e it does not alert any thing secondly the 1st anchor tag “yes” is not working the way it should work means I am unable click the “yes” tag and when I refresh the page the cancel button stops to work too.i can not figure out what I am doing wrong. The code is:


 <!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

<link rel="stylesheet" href="./style.css" type="text/css"/>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){

$('#addtocart').on('pageshow', function(event) {

                var proid=getUrlVars()["productid"];
alert(proid);

                var url_link="http://localhost:8080/magento/index.php/checkout/cart/add?"+proid+"&qty;=1";

document.getElementById("add").setAttribute("href",url_link);

});

});

    function getUrlVars() {

    var vars = {};

    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {

        vars[key] = value;

    });

    return vars;

}

</script>

    <title>ADD TO CART</title>

</head>

<body>

<div id="addtocart" data-role="page" data-add-back-btn="true">

    <div class="header">

      <h1 class="page-tile">HI-AT & SAFERTECH</h1>

    </div>

    <div class="body">

        <p class="description" contenteditable="true">DO YOU REALLY WANT IT TO ADD TO CART</p>

        <div class="loginregister">

             <a id="add">yes</a>

            <a  class="back" href="#" onClick="history.back();">cancel</a>

        </div>

    </div>

    <div class="footer">

        <hr />

       

    </div>

</div>

</body>

</html>