Javascript button onclick function undefined

Question

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.

I can't see what the problem is, if anyone can help that would be great.

My HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <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" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.0.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="cordova-2.5.0.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/libary.js"></script>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
      <title>Libary</title>
    </head>
    <body>
      <div id="capture" class="wrapper" data-role="page">
        <div data-role="header">
          <h1>Libary</h1>
        </div>
        <div data-role="content" class="app">
          <a href="#" data-role="button" onclick="retrievePicture();">Retrieve Photo</a>
          <p id="pictureStatus"></p>
          <div id="imagelocation">
            <img id="capturedImage"></img>
          </div>
        </div>
      </div>
    </body>
</html>

My JavaScript/jQuery:

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);
    }
}

Consider using HTML5 tags and attributes when using HTML5 doctype. type="text/javascript" for example, is not needed in HTML5. And a character set can be defined much shorter like this: <meta charset="utf-8"> — Robin van Baalen
– Robin van Baalen, Commented Mar 26, 2013 at 12:38

dsgriffin · Accepted Answer · 2013-03-26 12:51:23Z

3

Please don't define functions inside functions like that. Remove your retrievePicture() from inside the onDeviceReady() function and it should work fine.

As mentioned by @Robin van Baalen, this may be an interesting and relevant read - What you need to know about Javascript scoping.

Also, Functions and function scope.

edited Mar 26, 2013 at 12:51

answered Mar 26, 2013 at 12:32

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Robin van Baalen Over a year ago

+1 and an addition: What you need to know about Javascript scoping

DownTwoEarth Over a year ago

hey, thanks for response... i actually had it outside of the device ready for ages, and it didn't work either... after your comment... i tried it again... and by magic is worked, so thanks for your magic fix haha :) now to see if i can get the photo libary working.

DownTwoEarth Over a year ago

However, i just removed $('#pictureStatus').text("hello"); and suddenly the same problem came back... would there be a reason for it? Thanks

DownTwoEarth Over a year ago

im running it on phonegap for windows phone emulator at the moment, i cant say i actually know how to refresh the cache on it, ill look into it :)

DownTwoEarth Over a year ago

that makes more sense... as you can tell...newbie here haha accepted you shall be!

|

Collectives™ on Stack Overflow

Javascript button onclick function undefined

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related