javascript - Adding options to a select box dynamically -

i trying add options select element using javascript dynamically. university assignment , first time have studied javascript/html/php please bare me if terminology wrong. please note can't use mysql because don't cover in course.

we creating class booking system gym users can book class. wanted use drop down boxes, select class, time using next drop down box, has change depending on class selected. finally, user select personal trainer in last box, once again created depending on timeslot selected.

this have far (javascript side):

<script type="text/javascript">         function gettimes()         {             var index=document.getelementbyid("classes").selectedindex;             var x=document.getelementbyid("schedule");              if(index==0)             {                 document.getelementbyid("schedule").value=" ";             }             else if(index==1)             {                 var option=document.createelement("option");                 option.text="monday 8:00pm";                 try                 {                      // ie earlier version 8- w3 schools                     x.add(option,x.options[null]);                 }                 catch (e)                 {                     x.add(option,null);                  }              }                          } 

and html:

<div>  <span class="label">class:</span>        <select class="dropdown" id="classes" name="classes"     onchange="gettimes();">         <option value="none"> </option>             <option value="pilates">pilates</option>         <option value="crossfit">cross fit</option>   </select>   </div>  <div>   <span class="label">time:</span>   <select class="dropdown" id="schedule"></select> </div>   <div>   <span class="label">trainer:</span>   <select class="dropdown" id="trainer"></select>   </div> 

to code seems should work, whatever reason when select first class, in case "pilates" "time" drop down box still blank.

can tell me going wrong?

thanks!

the error in first line of function

function gettimes();                     ^------ have semi colon here                            not supposed there 

also better idea cache selectors if referencing same element again. bind events using javascript instead of binding them inline.

// store selectors can use later // improve performance var classdropdown = document.getelementbyid("classes"),     scheduledropdown = document.getelementbyid("schedule"); // abbd events using javascript classdropdown.addeventlistener('change', gettimes);  function gettimes() {       var index = classdropdown.selectedindex;        if (index == 0) {           scheduledropdown.value = " ";       } else if(index == 1) {           var option = document.createelement("option");           option.text = "monday 8:00pm";           try {               // ie earlier version 8- w3 schools               scheduledropdown.add(option, x.options[null]);           } catch (e) {               scheduledropdown.add(option, null);           }       }   } 

check demo