error already after creating phonegap application, Cannot call method method 'querySelector'

Question

after I created a phonegap application and run it there seems to be a error in logcat

Uncaught TypeError: Cannot call method 'querySelector' of null at file:///android_asset/www/js/index.js:41

is this a problem? and how do I fix this?

Answer 1

I had this error and I think you've tried to do what I did. I started building the app from the example app code without quite understanding the event model and what fires when.

The example app contains an HTML section in index.html

        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>

This is what is updated by by the event firing in the JS :

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
   //...  
   // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        app.receivedEvent('deviceready');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }

But I'd taken out the div with ID "deviceready" so the JS fails with the error you describe. I removed the call app.receivedEvent... and everything works fine. Having said that putting that div back caused a different max call stack error so I'm not sold I still have my JS correct.

What I (think!) I've also learnt is not to be tempted to use the classic $(document).ready(function() to load your app functionality. This should be a function that is called from the piece of code where the onDeviceReady event is fired instead.