Switch statement JS - Typeerror e is null -

[AlexGole1]

Hi all,
I am trying to create a GIS data portal that allows users to select one out three diffent methods for data extraction.
1) extract by graphic extent
2) extract by extent of a county
3) extract by unit (calfire)


I am using a switch statement that allow the users to select either one of these methods independently as shown on this thread.

The 1st extraction method works fine  but the two next return an error in firefox is:

TypeError: e is null http://js.arcgis.com/3.9/ Line 136

The error in internet explorer error is:

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

You can access a template of my app here:

http://testegis.fire.ca.gov/its/alexapps/clipandship/index.html



The code itself is here:

http://jsbin.com/rozic/1/edit

If any of you have ideas how to solve this. That would be very helpful!

Thank you,
Alex

[OwenEarley · Accepted solution]

This issue appears to be related to your loading images.

<script type="text/javascript">  ...  // Keep a reference to the loading icon DOM node.  var loading = dom.byId("loading");  var loading1 = dom.byId("loading1");  var loading2 = dom.byId("loading2");

In your HTML there is an image element with id="loading2":

<img id="loading2" src="images/loading2.gif"></img>

However, there are no elements with ids of "loading" or "loading1" in the page.

Your extractByCounty function attempts to show the element with id "loading":

domStyle.set(loading, "display", "inline-block");

Your extractByUnit function attempts to show the element with id "loading1":

domStyle.set(loading1, "display", "inline-block");

In both cases these elements do not exist in the HTML so you are getting the 'e is null' error when the Javascript code attempts to set the style of the element.

You could either change the Javascript to use the same loading image element ("loading2") or create the other two HTML image elements to fix the issue.

Owen
www.spatialxp.com.au

[AlexGole1]

This issue appears to be related to your loading images.

<script type="text/javascript">
 ...
 // Keep a reference to the loading icon DOM node.
 var loading = dom.byId("loading");
 var loading1 = dom.byId("loading1");
 var loading2 = dom.byId("loading2");

In your HTML there is an image element with id="loading2":

<img id="loading2" src="images/loading2.gif"></img>

However, there are no elements with ids of "loading" or "loading1" in the page.

Your extractByCounty function attempts to show the element with id "loading":

domStyle.set(loading, "display", "inline-block");

Your extractByUnit function attempts to show the element with id "loading1":

domStyle.set(loading1, "display", "inline-block");

In both cases these elements do not exist in the HTML so you are getting the 'e is null' error when the Javascript code attempts to set the style of the element.

You could either change the Javascript to use the same loading image element ("loading2") or create the other two HTML image elements to fix the issue.

Owen
www.spatialxp.com.au

That was it! Thank you Owen for all your help! Thanks to you I was able this data portal work. I am keeping your website in memory and will pass it along to other coworkers. You seem to  be very good at developping JS apps like these. Thank you again! Alex

[OwenEarley]

Good to hear it is working.

Debugging JS can be a pain. Chrome developer tools can be really helpful for these type of issues: https://developer.chrome.com/devtools/index

Also - make sure to remove all of the console.log() lines from your final code as they can cause issues in old versions of IE.

Owen
www.spatialxp.com.au

[AlexGole1]

Good to hear it is working.

Debugging JS can be a pain. Chrome developer tools can be really helpful for these type of issues: https://developer.chrome.com/devtools/index

Also - make sure to remove all of the console.log() lines from your final code as they can cause issues in old versions of IE.

Owen
www.spatialxp.com.au

Thanks for the tips. Will keep that in mind from now on.
Alex