Javascript button onclick function undefined

javascript jquery html function cordova

15,408

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.

15,408

Author by

DownTwoEarth

Updated on June 04, 2022

Comments

DownTwoEarth almost 2 years

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

Robin van Baalen about 11 years

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 about 11 years

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

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 about 11 years

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

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 about 11 years

ok, i think it may my calling of the phonegap photo libary that is breaking something, as when they becomes commented out it appears to work, will have to see what i did wrong there, thanks alot :)
dsgriffin about 11 years

@DownTwoEarth No problem! Glad you fixed this issue anyway and good luck with the library! feel free to 'tick' my answer if it worked, thanks :)
DownTwoEarth about 11 years

i would tick it.. but apparently im too new to this, and need rep myself :(
DownTwoEarth about 11 years

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