Log in

View Full Version : MOZILLA: Error: document.getElementById("kmHokRadio") has no properties


whiteman
11-22-2005, 03:15 PM
Hi all,

the purpose is next:
you have 2 radiobuttons. depending of what you choose, the precision choices (dropdown) are different. Within the first radiobutton choice, if you fill in the first 2 input boxes, the value is different again than when you fill in all three.
(you can check the behaviour in IE)

My little javascript thing works in IE but NOT in Mozilla.

In Mozilla I get the error:
Error: document.getElementById("kmHokRadio") has no properties
Source File: file:///C:/TEMP/InvoerStreepLijst.htm
Line: 146

This is the first line of the last JS script underneath the page.

I hope you see a light where I am in the dark.
thx for the effort,
Whiteman


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" src="flora.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
document.onkeypress = blockKeyPress;
function setVisibility(divId) {
document.getElementById('kmHokRaster').style.visibility='hidden';
document.getElementById('kmHokXY').style.visibility='hidden';
document.getElementById(divId).style.visibility='visible';
}
//-->
</script>

<script language="javascript" type="text/javascript">
<!--
var aDc = new Array(30);
var aVc = new Array(30);

//Initialize pointers
var nP = 0;
var Sind = 0;

var nP = 0;
var Sind = 0;

//xy-coord - value = 1
Sind++;
aDc[Sind] = new Array("zeker kmhok");
aVc[Sind] = new Array("1");
//kmhok - value = 2
Sind++;
aDc[Sind] = new Array("voorkeur kmhok","zeker kmhok");
aVc[Sind] = new Array("4","1");
//uurhok - value = 4
Sind++;
aDc[Sind] = new Array("onzeker uurhok","voorkeur uurhok","zeker uurhok");
aVc[Sind] = new Array("3","5","2");

function SelPrecisie(type) {
document.getElementById("kmHokRadio").value=type;
nP=0;
if (document.getElementById("kmHokRadio").value=="xy") nP=1;
else if (document.getElementById("kaartBlad").value.length > 0 && document.getElementById("uurHok").value.length > 0) {
nP=3;
if (document.getElementById("kmHok").value.length > 0) nP=2;
}
NewListad = document.getElementById("myprecisie");
NewListad.options.length = 1;
if (nP > 0) {
nen = aDc[nP].length
for ( i1 = 0; i1 < nen; i1++ ) {NewListad.options[i1 + 1] = new Option(aDc[nP][i1],aVc[nP][i1]);}
}
}

function setPrecisie() {
document.getElementById("precisie").value=document.getElementById("myprecisie").value;
document.getElementById("precisieIndex").value=document.getElementById("myprecisie").selectedIndex;
}
//-->
</script>
</head>

<body style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">

<table width="760" cellspacing="0" cellpadding="0" align="center" border="0">

<tr>
<td>


<form name="InvoerStreepLijstForm" method="POST" action="/flora/InvoerStreepLijst.do" onsubmit="setPrecisie()">
<FIELDSET width="100%">
<LEGEND>Kmhok informatie invoeren:</LEGEND>
<table width="750">

<tr>
<td class="caption_required"><label>Ligging:<span class="required">*</span></label></td>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="170">
<input type="radio" name="kmHokRadio" value="raster" checked="checked" onclick="setVisibility('kmHokRaster');SelPrecisie('raster');" class="smallRadio">
<label>Volgens kaartraster:</label>
</td>
<td width="410" rowspan="2" valign="middle">
<div id="kmHokRaster" style="position:relative;top:0px;visibility:visible;">
<table width="390" cellspacing="0" cellpadding="0">
<tr>
<td width="390">
<label>Kmhok(Uurhok):</label>
<input type="text" name="kaartBlad" value="" onchange="SelPrecisie('raster')" style="width:50px">
&nbsp;-&nbsp;<input type="text" name="uurHok" value="" onchange="SelPrecisie('raster')" style="width:50px">
&nbsp;(-&nbsp;<input type="text" name="kmHok" value="" onchange="SelPrecisie('raster')" style="width:50px">)
</td>
</tr>
</table>
</div>
<div id="kmHokXY" style="position:relative;top:0px;visibility:hidden;">
<table width="390" cellspacing="0" cellpadding="0">
<tr>
<td width="130">
<label>X:</label>
<input type="text" name="x" value="" style="width:50px">
</td>
<td width="260">
<label>Y:</label>
<input type="text" name="y" value="" style="width:50px">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<input type="radio" name="kmHokRadio" value="xy" onclick="setVisibility('kmHokXY');SelPrecisie('xy');" class="smallRadio">
<label>Volgens co&ouml;rdinaten:</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="caption_required"><label>Precisie:<span class="required">*</span></label></td>
<td>
<input type="hidden" name="precisie" value="">
<input type="hidden" name="precisieIndex" value="">
<select name="myprecisie" id="Precisie" >
<option></option>
</select>
</td>
</tr>

</table>

</FIELDSET>
</form>
</td>
</tr>
</table>

<script language="JavaScript" type="text/JavaScript">
//This piece is used so the precisieBox is reloaded with previous settings
document.getElementById("kmHokRadio").value="raster";
SelPrecisie(document.getElementById("kmHokRadio").value);
document.getElementById("myprecisie").selectedIndex = document.getElementById("precisieIndex").value;
</script>
</body>
</html>
jscheuer1
11-22-2005, 06:35 PM
I just noticed that the other day. For some odd reason, IE will "getElementById" even when there is no element with the id attribute set to the given id. In IE, the name attribute seems to be sufficient, at least with some element types. I guess it is a holdover from where document.all would retrieve an element(s) on the basis of their names, tag names or id. In Mozilla, which does it to spec, if there is no element with id="kmHokRadio" set, there is no element by that id, period. I'm not sure if it will mess up other things in your code or not but, where you have name="kmHokRadio" and similar in the HTML section, change it to id="kmHokRadio". Or, put id="kmHokRadio" in there as an attribute, in addition to name="kmHokRadio".
Twey
11-22-2005, 06:59 PM
Or use getElementsByName("kmHokRadio")[0].
whiteman
11-23-2005, 04:14 PM
@ John

Thanks a lot ! Your trick did the job perfectly.

@ Twey

Also thanks for your solution. I will keep this one on the side when I have a similar problem.