未捕获的TypeError：无法读取null的属性'querySelector'

Question

I am using Cordova app in Visual Studio 2015. I have added a simple button which changes the color of background of app to red. 我在Visual Studio 2015中使用Cordova应用程序。我添加了一个简单的按钮，可将应用程序背景的颜色更改为红色。 but it is giving above mentioned error. 但是它给出了上述错误。

index.html 的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 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 在此处输入图片说明

Answer 1

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

You don't have a div with ID deviceready , so your parentElement will be null. 您没有ID为deviceready的div，因此您的parentElement将为null。

EDIT : I think you can remove this whole block since it's belong to the default cordova page layout when you create a new project : 编辑：我认为您可以删除整个块，因为当您创建新项目时，它属于默认的cordova页面布局：

// 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;');

Answer 2

I think the dom has not yet been loaded, and you try to make a selection so it returns you a null. 我认为dom尚未加载，因此您尝试进行选择，以便它返回null。 try to move thoses lines outside the onDeviceReady() 尝试将这些行移到onDeviceReady（）之外

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

未捕获的TypeError：无法读取null的属性'querySelector'

问题描述

2 个解决方案

解决方案1
3 2017-01-25 10:36:42

解决方案2
0 2017-01-25 10:39:22

未捕获的TypeError：无法读取null的属性&#39;querySelector&#39;

问题描述

2 个解决方案

解决方案1 3 2017-01-25 10:36:42

解决方案2 0 2017-01-25 10:39:22

未捕获的TypeError：无法读取null的属性'querySelector'

解决方案1
3 2017-01-25 10:36:42

解决方案2
0 2017-01-25 10:39:22