Adding an app bar in WP8.1 html5

I tried to add appbar with WP8.1 using html5 and I use this link to guide me Quickstart: Adding an app bar with commands (HTML)

But it shows me this problem (a bug) with no error, as you see the image. enter image description here

Solution

this is my solution

page default.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CheckCnxInternet</title>

    <!-- WinJS references -->
    <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css 
    based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- CheckCnxInternet references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/Appbar.js"></script>
</head>
<body class="phone">
    <!-- Create AppBar -->
    <!-- BEGINTEMPLATE: Template code for an AppBar -->
    <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{closedDisplayMode:'minimal'}">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',tooltip:'Add item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}"></button>
    </div>
    <!-- ENDTEMPLATE -->
</body>
</html>

for the default.js let it with no modifcation, no code of Appbar.js

(function () {
    "use strict";
    var appBar;
    var cx = new Windows.Networking.Connectivity.NetworkInformation.getInternetConnectionProfile();


    var page = WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            appBar = document.getElementById("createAppBar").winControl;
            appBar.getCommandById("cmdAdd").addEventListener("click", doClickAdd, false);
            appBar.getCommandById("cmdRemove").addEventListener("click", doClickRemove, false);
            appBar.getCommandById("cmdEdit").addEventListener("click", doClickEdit, false);
            appBar.getCommandById("cmdCamera").addEventListener("click", doClickCamera, false);


        }
    });

    // Command button functions
    function doClickAdd() {
        WinJS.log && WinJS.log("Add button pressed", "sample", "status");
    }

    function doClickRemove() {
        WinJS.log && WinJS.log("Remove button pressed", "sample", "status");
    }

    function doClickEdit() {
        WinJS.log && WinJS.log("Edit button pressed", "sample", "status");
    }

    function doClickCamera() {
        WinJS.log && WinJS.log("Camera button pressed", "sample", "status");
    }

})();

I hope it helpful :)