title: Javascript button onclick function undefined
body: <p>im currently using PhoneGap and for some reason when i click a button, the function is undefined. iv tryed putting it inside the deviceReady function, as well as the document ready function, but neither seemed to make a difference.  </p>
  
  <p>I can't see what the problem is, if anyone can help that would be great.</p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;meta name="format-detection" content="telephone=no" /&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.0.min.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.min.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
          &lt;script type="text/javascript" src="cordova-2.5.0.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="phonegap.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/libary.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"&gt;&lt;/script&gt;
        &lt;title&gt;Libary&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id="capture" class="wrapper" data-role="page"&gt;
          &lt;div data-role="header"&gt;
            &lt;h1&gt;Libary&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content" class="app"&gt;
            &lt;a href="#" data-role="button" onclick="retrievePicture();"&gt;Retrieve Photo&lt;/a&gt;
            &lt;p id="pictureStatus"&gt;&lt;/p&gt;
            &lt;div id="imagelocation"&gt;
              &lt;img id="capturedImage"&gt;&lt;/img&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My JavaScript/jQuery:</strong></p>
  
  <pre><code>document.addEventListener("deviceready", onDeviceReady, false);
  var platform;
  
  function onDeviceReady() {
      //Find out what platform the device is running
      platform = device.platform;
  
      //Camera Section
      function retrievePicture() {
            // Take a picture using device camera and retrieve image
            //navigator.camera.getPicture(onCaptureSuccess, onCaptureFail, {Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY});
              $('#pictureStatus').text("hello");
      }
  
      function onCaptureSuccess(imageData) {
          $('#capturedImage').css("display", "block");
          var imageLocation = imageData;
          $('#capturedImage').attr("src", imageLocation);
          $('#pictureStatus').text(imageLocation);
      }
  
      function onCaptureFail(message) {
          $('#pictureStatus').text(message);
      }
  }
  </code></pre>