Uncaught TypeError: Cannot read property 'appendChild' of null with onsen ui

Question

我正在尝试结合 onsen ui navigation with QR Code Generator 的功能，以便在 <ons-template> 元素（onsen ui 元素）中获得二维码生成器的功能，如下所示：

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 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">
        <link href="css/onsenui.css" rel="stylesheet" />
        <link href="css/onsen-css-components.css" rel="stylesheet" />


        <title>Turism2</title>
    </head>
<body>
    <!-- App layout -->
    <ons-navigator id="myNavigator" page="page1.html"></ons-navigator>
    <ons-template id="page1.html">
        <ons-page id="page1">
            <ons-toolbar>
                <div class="center">Page 1</div>
            </ons-toolbar>
            <p>This is the first page.</p>
            <ons-button id="push-button">Push page</ons-button>

            <ons-button modifier="large--cta" onclick="makeCode()">
                Tap Me
            </ons-button>

            <input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" /><br />
            <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
        </ons-page>
    </ons-template>
    <ons-template id="page2.html">
        <ons-page id="page2" >
            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center"></div>
            </ons-toolbar>
            <p>This is the second page.</p>
    </ons-page>
    </ons-template> 
    <script src="scripts/jquery-3.1.0.min.js"></script>
    <script src="scripts/qrcode.js"></script>
    <script src="scripts/onsenui.js"></script>
    <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

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(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.

    };

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

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

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 100,
    height: 100
});

function makeCode() {
    var elText = document.getElementById("text");

    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }
    console.log("Calculare QR");
    qrcode.makeCode(elText.value);
}

makeCode();

$("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            console.log("Apasar ENTER");
            makeCode();
        }
    });

输出：

我已经尝试将文件 <script src="scripts/jquery-3.1.0.min.js"></script> 和 <script src="scripts/qrcode.js"></script> 移动到 header 位置标签，但它只能工作 1 秒。

请帮忙，我不知道我做错了什么。

Answer 1

嘿，我刚刚弄清楚出了什么问题。我的脚本在加载 DOM 之前运行。为了解决这个问题，我使用了：

window.onload = function () {
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 100,
        height: 100
    });

    function makeCode() {
        var elText = document.getElementById("text");

        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
        console.log("Calculare QR");
        qrcode.makeCode(elText.value);
    }

    makeCode();

    $("#text").
        on("blur", function () {
            makeCode();
        }).
        on("keydown", function (e) {
            if (e.keyCode == 13) {
                console.log("Apasar ENTER");
                makeCode();
            }
        });
};

Uncaught TypeError: Cannot read property 'appendChild' of null with onsen ui

Uncaught TypeError: Cannot read property 'appendChild' of null with onsen ui

javascript

cordova

cordova-plugins

onsen-ui

visual-studio-cordova