Uncaught TypeError: Eigenschaft 'QuerySelector' von null kann nicht gelesen werden

Ich verwende Cordova App in Visual Studio 2015. Ich habe eine einfache Schaltfläche hinzugefügt, die die Farbe des Hintergrunds der App auf rot ändert. aber es gibt oben erwähnten Fehler.Uncaught TypeError: Eigenschaft 'QuerySelector' von null kann nicht gelesen werden

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- 
     Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript. 
     For details, see http://go.microsoft.com/fwlink/?LinkID=617521 
    --> 
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 

     <meta name="format-detection" content="telephone=no"> 
     <meta name="msapplication-tap-highlight" content="no"> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 
     <title>WeatherApp</title> 
    </head> 
    <body> 
     <p>Hello World</p> 
     <input type="button" name="color" value="Change Color" id="color" onclick="changeColor()"> 
     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="scripts/platformOverrides.js"></script> 
     <script type="text/javascript" src="scripts/index.js"></script> 
    </body> 
</html>

index.js

(function() { 
"use strict"; 

document.addEventListener('deviceready', onDeviceReady.bind(this), false); 

function onDeviceReady() { 
    // Handle the Cordova pause and resume events 
    document.addEventListener('pause', onPause.bind(this), false); 
    document.addEventListener('resume', onResume.bind(this), false); 

    // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here. 
    var parentElement = document.getElementById('deviceready'); 
    var listeningElement = parentElement.querySelector('.listening'); 
    var receivedElement = parentElement.querySelector('.received'); 
    listeningElement.setAttribute('style', 'display:none;'); 
    receivedElement.setAttribute('style', 'display:block;'); 

}; 


function onPause() { 
    // TODO: This application has been suspended. Save application state here. 
}; 

function onResume() { 
    // TODO: This application has been reactivated. Restore application state here. 
}; 

function changeColor() { 
    var change = document.querySelector('#color'); 
    change.addEventListener('click', change, false); 
} 

function change() { 
    var clr = document.querySelector('body'); 
    clr.style.backgroundColor = 'red'; 
}

})();

enter image description here

Quelle

2017-01-25 honey

var parentElement = document.getElementById('deviceready'); 
var listeningElement = parentElement.querySelector('.listening');

Sie haben noch ein div mit der ID deviceready, so dass Ihre parentElement werden null sein.

EDIT: Ich denke, dass Sie den ganzen Block entfernen, da sie gehören in das Layout Standard cordova Seite sind, wenn Sie ein neues Projekt anlegen:

// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here. 
var parentElement = document.getElementById('deviceready'); 
var listeningElement = parentElement.querySelector('.listening'); 
var receivedElement = parentElement.querySelector('.received'); 
listeningElement.setAttribute('style', 'display:none;'); 
receivedElement.setAttribute('style', 'display:block;');

Quelle

2017-01-25 10:36:42

ich glaube, der dom noch nicht geladen worden ist, und Sie versuchen, um eine Auswahl zu treffen, so dass Sie eine Null zurückgeben. versuchen thoses Linien außerhalb des onDeviceReady()

var listeningElement = parentElement.querySelector('.listening'); 
var receivedElement = parentElement.querySelector('.received'); 
listeningElement.setAttribute('style', 'display:none;'); 
receivedElement.setAttribute('style', 'display:block;');

Quelle

2017-01-25 10:39:22

Ich glaube nicht zu bewegen es ein DOM Verladeauftrag Problem. Es sieht so aus, als ob die gesuchten divs von der standardmäßigen Cordova HTML-Indexseite entfernt wurden, ohne den JS-Code zu bearbeiten. –

Vielen Dank. Der Fehler wurde entfernt, die Schaltfläche funktioniert jedoch immer noch nicht. Die Schaltfläche ändert nicht die Farbe des Hintergrunds oder des Körpers – honey

Uncaught TypeError: Eigenschaft 'QuerySelector' von null kann nicht gelesen werden

Antwort

Verwandte Themen