Unable to get property 'style' of undefined or null reference

Question

Hi, I'm getting the following error on running my app:

{"exception":null,"error":[{"description":"Unable to get property 'style' of undefined or null reference","number":-2146823281,"stack":"TypeError: Unable to get property 'style' of undefined or null reference\n   at executeElementAnimation (ms-appx://microsoft.winjs.1.0/js/base.js:6652:13)\n   at applyAction (ms-appx://microsoft.winjs.1.0/js/base.js:6754:25)\n   at executeAnimation (ms-appx://microsoft.winjs.1.0/js/base.js:6815:13)\n   at enterPage (ms-appx://microsoft.winjs.1.0/js/ui.js:1473:9)\n   at navigated (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:114:21)\n   at parentElement (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:94:29)\n   at notifySuccess (ms-appx://microsoft.winjs.1.0/js/base.js:1404:21)\n   at enter (ms-appx://microsoft.winjs.1.0/js/base.js:1091:21)\n   at _run (ms-appx://microsoft.winjs.1.0/js/base.js:1307:17)\n   at _completed (ms-appx://microsoft.winjs.1.0/js/base.js:1275:13)"},{"description":"Unable to get property 'style' of undefined or null reference","number":-2146823281,"stack":"TypeError: Unable to get property 'style' of undefined or null reference\n   at executeElementTransition (ms-appx://microsoft.winjs.1.0/js/base.js:6575:13)\n   at applyAction (ms-appx://microsoft.winjs.1.0/js/base.js:6754:25)\n   at executeTransition (ms-appx://microsoft.winjs.1.0/js/base.js:6837:13)\n   at enterPage (ms-appx://microsoft.winjs.1.0/js/ui.js:1484:9)\n   at navigated (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:114:21)\n   at parentElement (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:94:29)\n   at notifySuccess (ms-appx://microsoft.winjs.1.0/js/base.js:1404:21)\n   at enter (ms-appx://microsoft.winjs.1.0/js/base.js:1091:21)\n   at _run (ms-appx://microsoft.winjs.1.0/js/base.js:1307:17)\n   at _completed (ms-appx://microsoft.winjs.1.0/js/base.js:1275:13)"}],"promise":{"_oncancel":null,"_nextState":null,"_state":{"name":"error","done":null,"then":null},"_value":[{"description":"Unable to get property 'style' of undefined or null reference","number":-2146823281,"stack":"TypeError: Unable to get property 'style' of undefined or null reference\n   at executeElementAnimation (ms-appx://microsoft.winjs.1.0/js/base.js:6652:13)\n   at applyAction (ms-appx://microsoft.winjs.1.0/js/base.js:6754:25)\n   at executeAnimation (ms-appx://microsoft.winjs.1.0/js/base.js:6815:13)\n   at enterPage (ms-appx://microsoft.winjs.1.0/js/ui.js:1473:9)\n   at navigated (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:114:21)\n   at parentElement (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:94:29)\n   at notifySuccess (ms-appx://microsoft.winjs.1.0/js/base.js:1404:21)\n   at enter (ms-appx://microsoft.winjs.1.0/js/base.js:1091:21)\n   at _run (ms-appx://microsoft.winjs.1.0/js/base.js:1307:17)\n   at _completed (ms-appx://microsoft.winjs.1.0/js/base.js:1275:13)"},{"description":"Unable to get property 'style' of undefined or null reference","number":-2146823281,"stack":"TypeError: Unable to get property 'style' of undefined or null reference\n   at executeElementTransition (ms-appx://microsoft.winjs.1.0/js/base.js:6575:13)\n   at applyAction (ms-appx://microsoft.winjs.1.0/js/base.js:6754:25)\n   at executeTransition (ms-appx://microsoft.winjs.1.0/js/base.js:6837:13)\n   at enterPage (ms-appx://microsoft.winjs.1.0/js/ui.js:1484:9)\n   at navigated (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:114:21)\n   at parentElement (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:94:29)\n   at notifySuccess (ms-appx://microsoft.winjs.1.0/js/base.js:1404:21)\n   at enter (ms-appx://microsoft.winjs.1.0/js/base.js:1091:21)\n   at _run (ms-appx://microsoft.winjs.1.0/js/base.js:1307:17)\n   at _completed (ms-appx://microsoft.winjs.1.0/js/base.js:1275:13)"}],"_isException":false,"_errorId":4},"id":4}

My javascript file is as of such:

(function () {
    "use strict";

    var ui = WinJS.UI;
    var utils = WinJS.Utilities;

    ui.Pages.define("/pages/itemDetail/itemDetail.html", {
        
        // Template tutorial code
        getAnimationElements: function () {
            return [[this.element.querySelector("header")], [this.element.querySelector(".content")]];
        },

        // 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) {
            var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
            element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
            //element.querySelector("article .item-title").textContent = item.title;
            //element.querySelector("article .item-subtitle").textContent = item.subtitle;
            //element.querySelector("article .item-image").src = item.backgroundImage;
            //element.querySelector("article .item-image").alt = item.subtitle;
            //element.querySelector("article .item-content").innerHTML = item.content;

            //element.querySelector(".detailfontstyle").textContent = item.mIOs.PrimaryObjective;



            // Template tutorial code
            appbar.winControl.disabled = false;
            appbar.winControl.hideCommands([labelSize, markItem]);
            appbar.winControl.showCommands([textSize]);
        },

        // Template tutorial code
        setPageFocus: function () {
            this.element.querySelector(".content").focus();
        },
    });
})();

and html file is:

<html>
<head>
    <meta charset="utf-8" />
    <title>itemDetailPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/MarketIODetails/marketingIODetails.css" rel="stylesheet" />
    <link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/itemDetail/itemDetail.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="itemdetailpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="details">
		<h1 style="font-family:'segoe ui'; color:orange;text-align:center; margin-bottom:20px">Details</h1>
		<!--<h2 class="detailfontstyle">Primary obj: Put primary obj here</h2>-->
		<!--<h2 class="detailfontstyle org">Org: Put organisation here</h2>
		<h2 class="detailfontstyle sap">SAP IO: Put SAP IO here</h2>
		<h2 class="detailfontstyle editor1">Editor 1: Put editor name here</h2>
		<h2 class="detailfontstyle edito2">Editor 2: Put editor name here</h2>-->
		
	</div>
	<div class="tablecontainer">
		<div class="tableoutlay">
				<h1 style="font-family:'segoe ui'; color:orange; text-align:center">Budget Table</h1>
				<table class="forecastTable">
					<thead>
						<tr style="height: 5px">
							<th></th>
							<th>Available</th>
							<th>Assigned</th>
							<th>Unassigned</th>
							<th>Approved</th>
							
						</tr>
                    </thead>
                    <tbody>
                        <tr>
							<th>Vendor</th>
							<td>1231</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							
						</tr>
                        <tr>
							<th>RevAdjust</th>
							<td>1231</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							
						</tr>
                        <tr>
							<th>Market</th>
							<td>1231</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							
						</tr>
					</tbody>
				</table>
			</div>
	
	<div class="tableoutlay" style="margin-top:43px">
		<h1 style="font-family: 'segoe ui'; color: orange; text-align:center">Forecast Table</h1>
		<table class="forecastTable">
                <thead>
						<tr style="height: 5px">
							<th></th>
							<th>July</th>
							<th>Aug</th>
							<th>Sep</th>
							<th>Oct</th>
							<th>Nove</th>
							<th>Dec</th>
							<th>Jan</th>
							<th>Feb</th>
							<th>Mar</th>
							<th>Apr</th>
							<th>May</th>
							<th>June</th>
						</tr>
                    </thead>
                    <tbody>
                        <tr>
							<th>Vendor</th>
							<td>1231</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>1289</td>
						</tr>
                        <tr>
							<th>Budget</th>
							<td>1231</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>1289</td>
						</tr>
                        <tr>
							<th>Market</th>
							<td>1231</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>1289</td>
						</tr>
                        <tr>
							<th>Some</th>
							<td>1231</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>1289</td>
						</tr>
                        <tr>
							<th>Some</th>
							<td>1231</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>7292</td>
							<td>9821</td>
							<td>4325</td>
							<td>1278</td>
							<td>1289</td>
						</tr>
                    </tbody>
            </table>
			</div>			
	    </div>
</body>
</html>

Any help is appreciated.

Answer 1

You can set a breakpoint in the animate function (in the error you posted).  My guess is that you are trying to animate something that is not in your page:

// Template tutorial code
        getAnimationElements: function () {
            return [[this.element.querySelector("header")], [this.element.querySelector(".content")]];
        },

Why did you add .content?  I don't see it anywhere in your code!

---

Jeff Sanders (MSFT)