キャッチされない例外TypeError：温泉UIでヌルのプロパティ「のappendChild」を読み取ることができません

私はそうのように、<ons-template>要素（温泉UI要素）の内部でQRコードジェネレータの機能性を得るために、QR Code Generatorでonsen ui navigationの機能を組み合わせるためにしようとしています：キャッチされない例外TypeError：温泉UIでヌルのプロパティ「のappendChild」を読み取ることができません

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>を移動するために、すでに試してみましたが、それはわずか1秒で動作します。

私が間違っていることを理解することはできません。

出典

2016-08-23 Greşanu Emanuel - Vasile

ちょっと私は何が間違っているかを考え出しました。私のスクリプトは、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(); 
      } 
     }); 
};

出典

2016-08-23 08:30:18

がところで代わりwindow.onload' 'のことに注意して、あなただけの' ons.ready行うことができますdeviceready' 'のリスニング（関数（）{...}）'とすべて入れそこにコードがあります - それは、両方のデバイスを待つ、domready +いくつかの追加のもの –

情報ありがとうございます。 –

キャッチされない例外TypeError：温泉UIでヌルのプロパティ「のappendChild」を読み取ることができません

答えて

関連する問題