title: Phonegap 3 - How to call Javascript Functions
body: <p>I'm using phonegap 3 and I'm unable to call my functions, it doesen't work !</p>
  
  <p>This is my code it's a basic sample for create contacts, but I won't to create a bunch of buttons to do different things like create, delete list and stuff like this but I can't get with it. The only code executed is in the inside of "OnDeviceReady" function. </p>
  
  <p>How can i call my functions and how ? Because the basic Javascript doesen't run. Thanks !</p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta 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/index.css" /&gt;
          &lt;title&gt;PILLEpalle!&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="app"&gt;
              &lt;h1&gt;PhoneGap&lt;/h1&gt;
              &lt;div id="deviceready" class="blink"&gt;
                  &lt;p class="event listening"&gt;Connecting to Device&lt;/p&gt;
                  &lt;p class="event received"&gt;Device is Ready&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="contactcreated" class="blink"&gt;
                  &lt;p class="event listening"&gt;Creating Contact&lt;/p&gt;
                  &lt;p class="event received"&gt;Contact created&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript" src="phonegap.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              app.initialize();
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My js file</p>
  
  <pre><code>var app = {
      // Application Constructor
      initialize: function() {
          this.bindEvents();
      },
      // Bind Event Listeners
      //
      // Bind any events that are required on startup. Common events are:
      // 'load', 'deviceready', 'offline', and 'online'.
      bindEvents: function() {
          document.addEventListener('deviceready', this.onDeviceReady, false);
      },
      // deviceready Event Handler
      //
      // The scope of 'this' is the event. In order to call the 'receivedEvent'
      // function, we must explicity call 'app.receivedEvent(...);'
      onDeviceReady: function() {
          app.receivedEvent('deviceready');
          var myContact = navigator.contacts.create({"displayName": "Test User"});
          myContact.note = "This contact has a note.";
          console.log("The contact, " + myContact.displayName + ", note: " + myContact.note);
          app.receivedEvent('contactcreated');
          myContact.save(app.onContactSaveSuccess,app.onContactSaveError);
      },
      // Update DOM on a Received Event
      receivedEvent: function(id) {
          var parentElement = document.getElementById(id);
          var listeningElement = parentElement.querySelector('.listening');
          var receivedElement = parentElement.querySelector('.received');
          listeningElement.setAttribute('style', 'display:none;');
          receivedElement.setAttribute('style', 'display:block;');
  
          console.log('Received Event: ' + id);
      },
      onContactSaveSuccess: function(contact) {
          window.alert("Save Success");
      },
      onContactSaveError: function(contact) {
          window.alert("Save Failed");
      },
  };
  </code></pre>