JavaScript runtime errors about undefined or null refences

StackOverflow https://stackoverflow.com/questions/17370149

Question

I have implemented a SettingsFlyout. From the view of this flyout, my app collection some info from user (firsname) and want to store it in roaming settings. This information get stored when user clicks a button the settings view and retrieved when in the beforeShow event for the flyout. These two events are setup in the ready function of the SettingsFlyout itself but for some reason I am getting following error.

0x800a138f - JavaScript runtime error: Unable to get property 'winControl' of undefined or null reference

on following line

var divtest = document.getElementById"test").winControl;

Similarly I also get

0x800a138f - JavaScript runtime error: Unable to set property 'onclick' of undefined or null reference.

Do you see anything I am doing wrong causing these issues?

Here is what I have in default.html

app.onsettings = function (e) {

        e.detail.applicationcommands = {
            "test": {
                href: "/pages/settings/test/test.html",
                title: "Test"
            }
        }

        WinJS.UI.SettingsFlyout.populateSettings(e);
    };

Here is the test.html itself.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="/pages/settings/test/test.css" rel="stylesheet" />

    <script src="/pages/settings/test/test.js"></script>

    </head>
    <body>
        <div 
            data-win-control="WinJS.UI.SettingsFlyout"  data-win-options="{settingsCommandId:'test',  width:'narrow'}">
            <div class="win-header">       
                <div class="win-label">test</div>
            </div>
            <div class="win-content">
                First Name: <input id="firstname" />
                <br />
                <input type="submit" value="Save" />
            </div>
        </div>  
    </body>
</html>

Here is the test.js file.

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/settings/test/test.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
            var divtest = document.getElementById("test").winControl;
            var firstname = document.getElementById("firstname");

            document.getElementById("submit").onclick = function (e) {
                //alert('hi');
                roamingSettings.values["firstname"] = firstname.value;
            }

            divtest.addEventListener("beforeshow", function () {
                firstname.value = roamingSettings.values["firstname"];
            });
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in viewState.
        }
    });
})();
Était-ce utile?

La solution

There are no elements that have the id submit or test in your HTML.

Autres conseils

The problem may be because this:

var divtest = document.getElementById("test").winControl;

looks for the HTML element with Id=test, it seems that you set 

settingsCommandId:'test'

but it's not the same, so is should be:

<div id="test" data-win-control="WinJS.UI.SettingsFlyout"  data-win-options="{settingsCommandId:'test',  width:'narrow'}">
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top