document.getElementById (still) not working

dom, javascript

Solution

You are probably executing the javascript before the DOM nodes are available.

this will not work

<script type="text/javascript">
  // trying to retrieve #chk1 before it exists in the DOM!
  document.getElementById('chk1');
</script>

<input id="chk1">

Whereas either of these will

<input id="chk1">

<script type="text/javascript">
  // #chk1 exists in DOM, this works
  document.getElementById('chk1');
</script>

or

<script type="text/javascript">
  // Force execution to wait until window is done i.e, DOM is ready
  window.onload = function()
  {
    document.getElementById('chk1');
  }
</script>

<input id="chk1">

EDIT

I copied your entire chunk of HTML from above, added this to the end of it

<script type="text/javascript">
alert([ 
    document.getElementById('chk0')
  , document.getElementById('chk1')
]);
</script>

and opened it in IE7. The alert produced `[object],[object]` which means it worked and found both nodes. Not sure what to tell you.

Problem

I started a thread here document.getElementById not working but it looks as though even the suggestions made were valid I still have a problem. I have a couple of checkboxes. When i view the page source here there are. document.getElementById('chk1') is the only one that is not null. How could that be? ``` <input id="chk0" value="JobStages###StageCode~JobCode###DRAW~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;" type="checkbox" /> <input id="chk1" value="JobStages###StageCode~JobCode###FEAS~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;" type="checkbox" /> <input id="chk2" value="JobStages###StageCode~JobCode###N/C~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;" type="checkbox" /> ``` EDIT: Pretty much the complete code ``` <tr id='rw1' onMouseOver='setHover(this,event);' class='DRAW~1005 ' onClick='setClick(this,event);'> <td id='RowId_0' width=0 style='display: none'>1</td> <td id='PrimaryKey_0' width=0 style='display: none'>DRAW~1005</td> <td id='StageCode_0' width=0 style='display: none'>DRAW</td> <td id='Allocated_0' nowrap style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: center; padding-left: 5px;' class='col1'><input id="chk0" value="JobStages###StageCode~JobCode###DRAW~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width: 0px; padding: 1px; margin: 0px; height: 14px;" type="checkbox" /></td> <td id='StageCode_0' nowrap style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: left; padding-left: 5px;' class='col2'></td> <td id='StageDescription_0' nowrap style='overflow: hidden; height: 16px; width: 123px; overflow: hidden; text-align: left; padding-left: 5px;' class='col3' onclick="showTextEditor(event,'JobStages','StageDescription','StageCode~JobCode','DRAW~1005 ');"> </td> <td id='StartDate_0' nowrap style='overflow: hidden; height: 16px; width: 171px; overflow: hidden; text-align: left; padding-left: 5px;' class='col4' onclick="showCalendar(event,'JobStages','StartDate','StageCode~JobCode','DRAW~1005 ');"> </td> <td id='EndDate_0' nowrap style='overflow: hidden; height: 16px; width: 112px; overflow: hidden; text-align: left; padding-left: 5px;' class='col5' onclick="showCalendar(event,'JobStages','EndDate','StageCode~JobCode','DRAW~1005 ');"> </td> </tr> <tr id='rw2' onMouseOver='setHover(this,event);' class='FEAS~1005 ' onClick='setClick(this,event);'> <td id='RowId_1' width=0 style='display: none'>2</td> <td id='PrimaryKey_1' width=0 style='display: none'>FEAS~1005</td> <td id='StageCode_1' width=0 style='display: none'>FEAS</td> <td id='Allocated_1' nowrap style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: center; padding-left: 5px;' class='col1'><input id="chk1" value="JobStages###StageCode~JobCode###FEAS~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width: 0px; padding: 1px; margin: 0px; height: 14px;" type="checkbox" /></td> <td id='StageCode_1' nowrap style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: left; padding-left: 5px;' class='col2'></td> <td id='StageDescription_1' nowrap style='overflow: hidden; height: 16px; width: 123px; overflow: hidden; text-align: left; padding-left: 5px;' class='col3' onclick="showTextEditor(event,'JobStages','StageDescription','StageCode~JobCode','FEAS~1005 ');"> </td> <td id='StartDate_1' nowrap style='overflow: hidden; height: 16px; width: 171px; overflow: hidden; text-align: left; padding-left: 5px;' class='col4' onclick="showCalendar(event,'JobStages','StartDate','StageCode~JobCode','FEAS~1005 ');"> </td> <td id='EndDate_1' nowrap style='overflow: hidden; height: 16px; width: 112px; overflow: hidden; text-align: left; padding-left: 5px;' class='col5' onclick="showCalendar(event,'JobStages','EndDate','StageCode~JobCode','FEAS~1005 ');"> </td> </tr> ```

Original source

Related problems