php - Javascript error: Object #<HTMLFormElement> has no method 'getElementById' -

i'm getting javascript error: object # has no method 'getelementbyid'. i'm trying have button transfers selected element select box in html. have looked everywhere nobodies solution seems work me =\

javascript

<script language="javascript"> function adddivision() {     var selected = document.frmsubmit.getelementbyid("selecteddivisions");      var div = document.frmsubmit.getelementbyid("divisions");     var divid = div.options[div.selectedindex].value;     var divtext = div.options[div.selectedindex].text;      var newoption = document.frmsubmit.createelement(divid);     newoption.text = divtext;      selected.add(newoption,null); } </script> 

html

<div id="content"> <form id="frmsubmit" name="frmsubmit" action="">   <div id="step1content">     <h2 style="float:left">step 1:</h2><p style="float:left; padding-top:10px; padding-left:20px;">select divisions</p>     <div style="clear:both">         <select id= "divisions" name="divisions" size="8">     <?  //getting divisions based on league_id         $getdivisionssql = "select * level league_id = '1' , disabled = '0'";         $getdivisionsquery = $db->query($getdivisionssql);         while( $divrow = $db->getrow($getdivisionsquery) )         {             echo "<option id=".$divrow['id'].">".$divrow['description']."</option>";         }     ?>         </select>     <?           echo "<img id='doadd' width='40px' height='25px' style='position: relative; bottom:75px; cursor:pointer;' src='".$baseimagespath."greenarrow.png'/>";         echo "<img id='doadd' width='40px' height='25px' cursor:pointer; style='position: relative; bottom: 25px; right:40px; cursor:pointer;' src='".$baseimagespath."redarrow.png'/>";     ?>           <select style="position:relative; right:40px;" name="selecteddivisions" id="selecteddivisions" size="8">     <?  //list of divisions use      ?>  <option>apple</option>         </select>     </div>  </div>      <div style="padding-top:50px; padding-left:50px; width:100%; float:left; ">     <h2 style="float:left">step 2:</h2><p style="float:left; padding-top:10px; padding-left:20px;">select starting date of games</p> </div>  <div style="padding-top:50px; padding-left:50px; width:100%; float:left">     <h2 style="float:left">step 3:</h2><p style="float:left; padding-top:10px; padding-left:20px;">select total number of weeks in season</p>  <div style="padding-top:50px; width:100%; float:left">     <input type="submit" value="create schedule"> </div> </div>  </form> </div> 

this problem happening because you're trying use getelementbyid node element, , method belongs document. it's logical when think it: ids supposed unique inside page, there no point in using dom element in order "filter" element id.

so, if change from:

document.frmsubmit.getelementbyid("selecteddivisions"); 

to:

document.getelementbyid("selecteddivisions"); 

everything should work expected.

---

as sidenote, getelementsbytagname , getelementsbyclassname supported node elements - used select child nodes match name of tag/class specified.

check api reference: https://developer.mozilla.org/en-us/docs/web/api/element