Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [solved] Understanding a tutorial

    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 -

    http://www.javascriptkit.com/javatut...content2.shtml

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

    Code:
    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 -
    Code:
    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:

    Code:
    <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>
          </select>     
       </div>
       <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>      
          </select>
       </div>
    </div>
    The contents of species.js (with some species removed to make it easier to read):

    Code:
    var grouplist=document.classic.groups
    var specieslist=document.classic.species
    var species=new Array()
    species[0]=""
    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){
    specieslist.options.length=0
    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.

    -=-
    Doh!
    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.

  • #2
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Oooh - it gets funner

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •