Uncaught ReferenceError: MyFunction is not defined - PhoneGap

1
votes

I'm using PhoneGap and jQuery Mobile for a mobile web app. When I try to run MyFunction that is set on a onclick attribute then I get an error in the console that

Uncaught ReferenceError: MyFunction is not defined.

This is my code:

<!DOCTYPE html>
<html>
<head>
 <title>Product</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.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.1.min.js"></script>



<!--Generation Script Starts here -->
<script type="text/javascript">
function makeid()
{
    var text = "";
    var possible = "123456789";

    for( var i=0; i < 4; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

function makeid1()
{
    var text1 = "";
    var possible = "123456789";

    for( var i=0; i < 1; i++ )
        text1 += possible.charAt(Math.floor(Math.random() * possible.length));

    return text1;
}

function makeid2()
{
    var text2 = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    for( var i=0; i < 1; i++ )
        text2 += possible.charAt(Math.floor(Math.random() * possible.length));

    return text2;
}

function makeid3()
{
    var text3 = "";
    var possible = "123456789";

    for( var i=0; i < 2; i++ )
        text3 += possible.charAt(Math.floor(Math.random() * possible.length));

    return text3;
}

function myFunction()
{
              document.getElementById("demo").innerHTML="D01E-BOA0-" + makeid() + "-" + makeid1() + makeid2() + makeid3();
}

</script>
<!-- Generation Script Ends Here -->

</head>
<body>

<div data-role="page">

<div data-role="header" data-theme="b">
    <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-iconshadow="false" data-inline="true">Home</a>
    <h1>Product</h1>
</div><!-- /header -->

<div data-role="content">


    <p id="demo" style="text-align:center;"></p>

    <input type="button" onclick="myFunction()" value="Generate!" data-theme="b">
</div><!-- /content -->


</div><!-- /page -->

</body>
</html>
2
javascriptcordova
Why are you importing jQuery twice? – Pointy
In your actual code, you declared myFunction and call myFunction(), but the error message you posted says Uncaught ReferenceError: MyFunction is not defined. Note the capital "M". JavaScript is case-sensitive. Make sure you aren't mixing those up – Ian
It works for me without any error. Check the FIDDLE. – user1823761
It works on my computer but it messes up when I execute it on android. Here is the picture of the error log gyazo.com/5784e0b14b7306dc746fae530ef8c9d4 – Tayyab
@user2405869 What about this FIDDLE? – user1823761

2 Answers

1
votes

I'm not sure this will help or not, wrap all your code into document ready, and handle the click of button with jQuery:

<input type="button" id="generate" value="Generate!" data-theme="b">



$('#generate').on('click', function () {
    $("#demo").html("D01E-BOA0-" + makeid() + "-" + makeid1() + makeid2() + makeid3());
});

The full code:

$(function () {

    function makeid() {
        var text = "";
        var possible = "123456789";

        for( var i=0; i < 4; i++ ) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }

        return text;
    }

    function makeid1() {
        var text1 = "";
        var possible = "123456789";

        for( var i=0; i < 1; i++ ) {
            text1 += possible.charAt(Math.floor(Math.random() * possible.length));
        }

        return text1;
    }

    function makeid2() {
        var text2 = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        for( var i=0; i < 1; i++ ) {
            text2 += possible.charAt(Math.floor(Math.random() * possible.length));
        }

        return text2;
    }

    function makeid3() {
        var text3 = "";
        var possible = "123456789";

        for( var i=0; i < 2; i++ ) {
            text3 += possible.charAt(Math.floor(Math.random() * possible.length));
        }

        return text3;
    }

    $('#generate').on('click', function () {
        $("#demo").html("D01E-BOA0-" + makeid() + "-" + makeid1() + makeid2() + makeid3());
    });

});

Check this FIDDLE to test it on android.

1
votes

This might solve your problems:

  1. Add a listener for onLoad to your body:

    <body onLoad="fireItUp()">

  2. Use the called method to add an event listener for cordova's deviceready:

    function fireItUp() {
document.addEventListener("deviceready", onDeviceReady, false);

}

  3. Use the call back method to bind your events to jquery mobiles 'tap' event (You might want to give the button a id or class, since this binds to all input elements, which is probably undesired):

    function onDeviceReady() {            
    jQuery(input).bind('tap',function(event){
    myFunction();
    });
}