2017-01-25 24 views
1

Visual Studio 2015でCordovaアプリを使用しています。アプリの背景色を赤に変更する簡単なボタンを追加しました。上記のエラーが発生しています。Uncaught TypeError:ヌルの 'querySelector'プロパティを読み取ることができません

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

答えて

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

あなたはID devicereadyを持つdiv要素を持っていないので、あなたparentElementはnullになります。

編集:私はあなたが新しいプロジェクトを作成するときには、デフォルトのコルドバのページレイアウトに属していますので、あなたは、このブロック全体を削除することができると思います。

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

を私はDOMがロードされていないと思うし、あなたがしようあなたがnullを返すように選択を行います。 onDeviceReady()の外側に行を移動しようとしました

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

DOMロードの問題ではないと思います。検索されたdivがJSコードを編集せずにデフォルトのCordova HTMLインデックスページから削除されたように見えます。 –

+0

ありがとうございました。エラーは削除されますが、ボタンはまだ動作していません。ボタンが背景やボディの色を変更していない – honey

関連する問題