none
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.

    Sunday, September 23, 2012 1:15 PM

All replies

  • 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)

    Wednesday, September 26, 2012 1:43 PM
    Moderator