View Full Version : [solved] Understanding a tutorial

01-23-2009, 02:37 PM
Brand new to javascript.
Now I need it to resolve an issue where a select list in straight html is just too long, and the list is easy to break into groups.

So I followed the tutorial here -


However it's not working, and when I look at the error console -

Error: document.classic is undefined
Source File: http://www.mydomain.org/js/species.js
Line: 2

This I assume refers to the attempt to initialize the variables -

var countrieslist=document.classic.countries
var citieslist=document.classic.cities

Their example seems to work for me on their site, I tried looking at the source for the page to see if document.classic was defined elsewhere, and if it is, it must be in an external javascript that's referenced.

I'm betting this is an extremely n00b question, but really, I'm stumped.

The complete code as I have it implemented -

on my web page:

<script src="/js/species.js" type="text/javascript" />
<div id="speciesNew" class="formFloat">
<div id="speciesGgroup" class="up_required">
<label for="group">Group</label>
<select name="group" id="group" onchange="updateSpecies(this.selectedIndex)">
<option value="0" selected="selected">-- Select Group --</option>

<option value="1">Frogs and Toads</option>
<option value="2">Salamanders and Newts</option>
<option value="3">Lizards</option>
<option value="4">Snakes</option>
<option value="5">Turtles and Tortoises</option>
<div style="float:left; width: 4px;">&nbsp;</div>
<div id="speciesSpecies" class="up_required">

<label for="species" id="species">Species</label>
<select name="species" id="species">
<option value="">-- Select Species --</option>

The contents of species.js (with some species removed to make it easier to read):

var grouplist=document.classic.groups
var specieslist=document.classic.species
var species=new Array()
species[1]=["Coastal Tailed Frog|34", "Western Toad|49"]
species[2]=["Southern Long-toed Salamander|39", "Speckled Black Salamander|41"]
species[3]=["California Whiptail|23", "Shasta Alligator Lizard|20"]
species[4]=["Northern Rubber Boa|1", "Western Yellow-bellied Racer|11"]
species[5]=["Northwestern Pond Turtle|26", "Red-eared Slider|27"]

function updateSpecies(selectedsepeciesgroup){
if (selectedspeciesgroup>0){
for (i=0; i<species[selectedspeciesgroup].length; i++)
specieslist.options[specieslist.options.length]=new Option(species[selectedspeciesgroup][i].split("|")[0], species[selectedspeciesgroup][i].split("|")[1])

No other js on the page.

Before hitting post, it dawned on me - document is the document.
classic is the form.

So I need to adjust that to *my* form.
I'll post anyway since I registered just to ask, and go by myself a js book so such silly things aren't an issue for me in the future.

01-23-2009, 02:59 PM
I got it working for me, but only in standard html.
Fails in xhtml - a google specified the reason is DOM change.
Perhaps that tutorial needs an update - I'll figure it out.