Error: 'document.forms.location.city.options' is null or not an object

Dev Articles Community Forums Sponsor:

Generate data entry and reporting .NET Web apps in minutes, straight from your database. Read our FREE whitepaper “Build Web 2.0 Applications Without Hand-Coding” Download now!

March 22nd, 2008, 11:43 PM

herodotus

Registered User

Join Date: Mar 2008

Posts: 2

Time spent in forums: 41 m 52 sec
Reputation Power: 0

Need Help Debugging Script/Error in Script - Error: 'document.forms.location.city.options' is null or not an object

Hi

I'm new to javascript and cannot fathom how to solve this error:

Error: 'document.forms.location.city.options' is null or not an object (IE7) or 'document.forms.location.city' has no properties (Mozilla)

I think that the error is telling me that the object hasn't picked up any values, when loaded, from the cities.js file, but I cannot figure out how to solve the problem or what might be causing it not to find any values.

Any help greatly appreciated.

The complete html file is:

Code:

<html>
<head>
<title>Finding World Map Locations</title>

<script language="JavaScript">
   var top = 90,
   left = -180,
   bottom = -90,
   right = 180;

<!-- JavaScript function to process the coordinates just entered --> 
function processCoords () {
     var form = document.forms["location"];
     var lon = form["lon"].value,
     lat = form["lat"].value;
     
     if (lat > top || lat < bottom) {
     alert("Latitude must be between" + bottom + " and " + top);
     return;
     }
     if (lon > right || lon < left) {
     alert("Longitude must be between" + right + " and " + left);
     return;
     }

<!-- Get map image object and calculate the ratio of pixels per degree -->
var basemap = document.getElementById("worldmap");

var x_scale = basemap.width / (right - left);
	alert("Value of x_scale is " + x_scale);
var y_scale = basemap.height / (bottom - top) * -1;
	alert("Value of y_scale is " + y_scale);

<!-- document.write("Map image is of width "+ basemap.width +      " by height " + basemap.height + " pixels. " + -->
<!--     "X-scale is " + x_scale + " and y-scale is " +      y_scale + " pixels per degree."); -->

<!-- Calc x,y pixel position from lat/long coords -->

var x = ((1 * lon + 180) * x_scale);
	alert("Value var x is " + x);
var y = ((180 - (1 * lat + 90)) * y_scale);
	alert("Value var y is " + y);

<!-- Adjust pixel coords by location of image within window -->
x+= basemap.offsetLeft;
y+= basemap.offsetTop;


<!-- Obtain the pin marker object and set its attributes to the desired location and to be visible --> 
var pin = document.getElementById("pinmarker");

<!-- Adjust the pin location by the size of the pin marker image -->
x -= pin.width / 2 - 4;
y -= pin.height-2; 


pin.style.position="absolute";
pin.style.visibility="visible";
pin.style.top=y;
pin.style.left=x; 
}

<!-- Function to read in city names and coords from a text file -->
function populateCityList () {
     for (i = 0; i < cities.length; i++) 
        document.forms["location"].city.options[i] = 
	new Option(cities[i][0], i);
}


<!-- Function to select appropriate city coords from the array -->
function selectCity (item) {
     item.form["lat"].value = cities[item.selectedIndex][1];
     item.form["lon"].value = cities[item.selectedIndex][2];
     item.form.submit();
}

</script>

<script language="JavaScript" src="cities.js" ></script>

</head>

<body onLoad="populateCityList()">
<h1><font face="arial" size="14" color="red">World Map</font></h1>
<p><b>Please Enter Values for Latitude and Longitude:</b></p>
<div>

<select name="city" onChange="selectCity(this)"></select>

<form name="location" action="javascript:processCoords()">

Latitude: <input name="lat" type="text" size="11" />
Longitude: <input name="lon" type="text" size="11" />
<input type="submit" value="Go" />
</form>
</div>

<div>
<p><img id="worldmap" src="world.jpg" width="800" height="400"></p>
<img id="pinmarker" src="pin.gif" style="visibility:hidden;" /> 
</div>

</body>
</html>

March 23rd, 2008, 03:50 PM

Mittineague

Contributing User

Join Date: Jul 2005

Location: West Springfield, Massachusetts

Posts: 540

Time spent in forums: 1 Week 1 Day 1 h 44 m 31 sec
Reputation Power: 3

dynamic DOM

Hi herodotus, welcome to the forums,
AFAIK, you can either change the code to use createElement instead of "new Object", which would update the DOM, or add history.go to update it.

Code:

<!-- Function to read in city names and coords from a text file -->
function populateCityList () {
     for (i = 0; i < cities.length; i++) {
	        document.forms["location"].city.options[i] = 
	new Option(cities[i][0], i);
	}
	history.go(0);
}

__________________
WP plugins - Error Reporting, Clean Options
http://www.mittineague.com/dev/er.php
http://www.mittineague.com/dev/co.php

March 25th, 2008, 07:13 AM

herodotus

Registered User

Join Date: Mar 2008

Posts: 2

Time spent in forums: 41 m 52 sec
Reputation Power: 0

I'll give that a go

Thanks Mittineague, I'll give that a go - I also found that the select name "city" etc. weren't in the actual form, it works now, but still with the same error.

Cheers, herodotus.

Quote:

Originally Posted by Mittineague

Hi herodotus, welcome to the forums,
AFAIK, you can either change the code to use createElement instead of "new Object", which would update the DOM, or add history.go to update it.

Code:

<!-- Function to read in city names and coords from a text file -->
function populateCityList () {
     for (i = 0; i < cities.length; i++) {
	        document.forms["location"].city.options[i] = 
	new Option(cities[i][0], i);
	}
	history.go(0);
}

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: