CODEWITHSUNDEEP
javascripthtmlcordova
peter
peter

Reputation: 13491

How to Handle Multiple Javascript Files

I have a PhoneGap HTML5 file as follows (only showing part of the head),

<head>
    <script type="text/javascript" src="Javascript/phonegap-1.3.0.js"></script>
    <!--<script type="text/javascript" src="Javascript/photo.js"></script>-->
    <script>
        function takePhoto()
        {
            alert("Take Photo");

            navigator.camera.getPicture(onSuccess, onFail, { 
                quality: 50, 
                destinationType: Camera.DestinationType.FILE_URI, 
                sourceType: Camera.PictureSourceType.CAMERA});
        }

        function onSuccess(imageData)
        {
            var image = document.getElementById('photoImg');
            image.src = "data:image/jpeg;base64," + imageData;
        }

        function onFail(message)
        {
            alert('Failed because: ' + message);
        }
    </script>
</head>

In the body I have this markup,

<button onclick='takePhoto()'>Take Photo</button>

Having it defined like above works fine. The problem is that I don't want to define the javascript in my html document. I want it to look like this,

<script type="text/javascript" src="Javascript/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="Javascript/photo.js"></script>

And have photo.js contain the takePhoto method. I cannot get it to work like that. In my javascript console I get the error,

Uncaught ReferenceError: takePhoto is not defined at file:///android_asset/www/index.html:81

Upvotes: 1

Views: 1905

Answers (2)

peter
peter

Reputation: 13491

OK, so the main problem I was having there was that my photo.js file had an error in it. Fixing the error got me to a place where it was working.

I thought there was more to this issue though which is why I asked a question here. Before when I had the script inline it wasn't working either, making me think that the script there was not able to call the code in phonegap.cs.

Turns out that it doesn't work in a browser on my PC, but on an actual android and in the android simulator it is working.

Upvotes: 1

ThePrimeagen
ThePrimeagen

Reputation: 4582

Check it : Here is your file.js your importing

// I changed it for the purposes of not intersecting any other library.
(function() {
    MyLibrary = {
        takePhoto: function() {
            // your code here
        }
    }
})()

Then your html document can do something like

<button onclick='MyLibrary.takePhoto()'>Take Photo</button>

Upvotes: 0

Related Questions