getElementByID has no properties

[tommy1980]

I have looked through my code about 5 times now and havent been able to fix it. It works fine in IE but FireFox keeps trowing back an error in the javascript console.

I have searched through the site and found some familiar issues but none have yet help me to resolve my issue.

This is the first part of the code and as far as I can tell this is working fine.
-----------------------------------------------------
<SCRIPT language="javascript">

function ChangeMake() {
var blnChanged
if (blnChanged!= 0) {
ChangeOptions('make', 'model', 'arrModelDetails');
}

if (document.frm1.model.length == 2)
{
var lenList = document.frm1.model.length;
document.frm1.model.options[0] = null;
document.frm1.model.length = lenList-1;
document.frm1.model.selectedIndex = 0;
}

}
</SCRIPT>
-----------------------------------------------------

Then this is where the error occurs, the line that is italic is the line that is being thrown back as not having any properties.

-----------------------------------------------------
<SCRIPT LANGUAGE="JAVASCRIPT">
function ChangeOptions(lstPrimary, lstSecondary, strArray)
{
if (!strArray){return(false);}
var alen = eval(strArray + ".length");
var listLen = 0;
var primaryObj = document.getElementById(lstPrimary);
var secondaryObj = document.getElementById(lstSecondary);
var strKey = primaryObj.options[primaryObj.selectedIndex].value;

for (var i = 0; i < alen; i++)
{
if (eval(strArray + "[i][0] == '" + strKey + "'"))
{
listLen = listLen + 1;
secondaryObj.options[listLen] = eval("new Option(" + strArray + "[i][2], " + strArray + "[i][1])");

}
}

}
</SCRIPT>
-----------------------------------------------------

any help would be much appreciated as this is driving me up the wall becasue I cant fix it.

[john_k]

Try putting apostrophes around the names of the form elements:

var primaryObj = document.getElementById('lstPrimary');
var secondaryObj = document.getElementById('lstSecondary');

[StupidScript]

And just to tidy up, might as well add the statement-ending semi-colon to the variable declaration in:

function ChangeMake() {
var blnChanged <<ADD semi-colon here
if (blnChanged!= 0) {
ChangeOptions('make', 'model', 'arrModelDetails');
}

Just to tidy up ... :)

[john_k]

Try putting apostrophes around the names of the form elements:
var primaryObj = document.getElementById('lstPrimary');
var secondaryObj = document.getElementById('lstSecondary');

Sorry - I fired that off without looking closely enough - I didn't realize that lstPrimary and lstSecondary were the parameter names. So nevermind about the apostrophes.

The line of code that is throwing the error has multiple object resolutions, so the error could potentially refer to any of them.

Try adding the following lines for debugging (add after the line var secondaryObj = document.getElementById('lstSecondary'):

alert(primaryObj.options); // should display object (or maybe true) 
alert(primaryObj.selectedIndex); // should display value > -1 
alert(primaryObj.options[primaryObj.selectedIndex]); // should display object (or maybe true) 
alert(primaryObj.options[primaryObj.selectedIndex].text); // should display text of the option 
alert(primaryObj.options[primaryObj.selectedIndex].value); // should display value of the option (if none is explicitly set, then same as .text) 

One of these will throw an error. I expect that nothing is selected on the list, so the selectedIndex is -1 and the expression primaryObj.options[primaryObj.selectedIndex] resolves to null or undefined.