个人中心
gpt4 book ai didi

javascript - 未捕获的类型错误 : Cannot read property 'querySelector' of null

转载 作者：行者123 更新时间：2023-11-29 19:07:23 25 4
gpt4 key购买 nike

我在 Visual Studio 2015 中使用 Cordova 应用程序。我添加了一个简单的按钮，可将应用程序的背景颜色更改为红色。但它给出了上述错误。

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

最佳答案 

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

您没有 ID 为 deviceready 的 div，因此您的 parentElement 将为空。

编辑:我认为你可以删除整个 block ，因为它属于默认的 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;');

关于javascript - 未捕获的类型错误 : Cannot read property 'querySelector' of null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41849264/

25 4 0
文章推荐： javascript - Dropzone js 不会触发 ajax 调用
文章推荐： java - 无法打开 JPA EntityManager 进行事务 - 通信链接失败(Spring-boot/jpa/hibernate/连接池)
文章推荐： javascript - 如何使用 jQuery 异步上传文件？
文章推荐： javascript - 使用 JSZip 读取 zip 的内容
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com