getElementById works in IE but not Mozilla/Netscrape/Opera/FireFox

[WolfShade]

I have this very nice script for selecting a value from a horizontal graph; click an area and the value is set in a hidden field, as well as changing the image in that area to indicate that it has been 'chosen'.

It works fantastic in IE, but not Mozilla/Netscrape/Opera/FireFox; it won't even do the 'rollover' effects in Mozilla, much less set a value. I suspected that it might be because Mozilla is nit-picky about javascript whereas IE is a little more forgiving, esp. if the object ID is being dynamically set.

If anyone could glance at the code and tell me why it won't work in Mozilla, I'd greatly appreciate it. I'll attach it below my sig (there are two functions.)

Thanks,
WolfShade
^_^

============================

(In this one, an anchor mouseover and mouseout refer to this: a is row, b is index in that row, c is borderColor to change to)

function overBorder(a,b,c) {
thsID = document.getElementById("i"+a+"_"+b);
thsID.style.borderColor=c;
}


(In this one, onMouseUp passes row and index only; the image to be changed to is in the script)

function chooseBorder(a,b) {
for(z=0;z<=31;z++) {
switch(z) {
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 10:
document.getElementById("i"+a+"_"+z).src="_images/ratings-novice-CFCF65.gif";
document.getElementById("i"+a+"_"+z).style.borderColor="CFCF65";
break;
case 11:
case 12:
case 13:
case 14:
case 15:
case 16:
case 17:
case 18:
case 19:
case 20:
document.getElementById("i"+a+"_"+z).src="_images/ratings-advancedbeginner-FFCC66.gif";
document.getElementById("i"+a+"_"+z).style.borderColor="FFCC66";
break;
case 21:
case 22:
case 23:
case 24:
case 25:
case 26:
case 27:
case 28:
case 29:
case 30:
document.getElementById("i"+a+"_"+z).src="_images/ratings-competent-FF9A65.gif";
document.getElementById("i"+a+"_"+z).style.borderColor="FF9A65";
break;
case 31:
document.getElementById("i"+a+"_"+z).src="_images/ratings-proficient-CCCCCC.gif";
document.getElementById("i"+a+"_"+z).style.borderColor="CCCCCC";
break;
default:
document.getElementById("i"+a+"_"+z).src="_images/pixel-FFFFFF.gif";
document.getElementById("i"+a+"_"+z).style.borderColor="FFFFFF";
break;
}
}
document.getElementById("i"+a+"_"+b).src="_images/pixel-000000.gif";
kd = eval("document.learningplan_step3.keyd"+a); kd.value=b;
}

[7stud]

1)What error is the Firefox javascript console giving you? Mark the line in your code.

2) How are you calling your functions?

[Ultimater]

This won't solve your problem but it's a start:
Don't use eval, replace: eval("document.learningplan_step3.keyd"+a);
with: window["document.learningplan_step3.keyd"+a];


works in IE but not Mozilla/Netscrape/Opera/FireFox

I couldn't imagine how any of those browsers wouldn't support document.getElementById. They all understand the function, so it must be some other issue.

I think the problem with those browsers is that your function never even gets called in the 1st place.

[WolfShade]

1)What error is the Firefox javascript console giving you? Mark the line in your code.

For example, if the image is named "i2_4", then the error message is:
i2_4 is not defined

2) How are you calling your functions?

Each image is enclosed within anchor tags that use either "onMouseOver" or "onMouseOut" for the rollover effects, and "onMouseUp" for setting the value and changing the image src.

WolfShade
^_^

[WolfShade]

This won't solve your problem but it's a start:
Don't use eval, replace: eval("document.learningplan_step3.keyd"+a);
with: window["document.learningplan_step3.keyd"+a];


Y'know, in all the google searches I've been doing, not a single site even mentioned 'window[]' as an alternative for 'eval()'. I'll give it a shot, and let you know. AND, if it works, I'm going to email each of those sites and give them an earfull (eyefull?) for not having even made note of 'window[]'.

Thanks for your suggestion. I'll keep you posted.

WolfShade
^_^

[Ultimater]

As I said earlier

This won't solve your problem but it's a start

[WolfShade]

Okay, now I'm really going to start pulling my hair out.

When I changed code in the rollover function as you suggested, it made no difference for the rollover effect; BUT, it did allow me to set the value and change the image in that place. WAY closer than I was, earlier. Thanks for the suggestion! :)

OTOH, when I changed code in the choose function, none of it worked; no rollover, no choose, nothing. I may have to play with it a bit more, but it's late and the office is getting more empty, so I'll work on it Monday.

Thanks, again. I'll let you know if anything else develops from your idea.

WolfShade
^_^

[Ultimater]

You aren't relying on any onchange events to do anything in your code, are you?
Not all browsers support it.

[WolfShade]

You aren't relying on any onchange events to do anything in your code, are you?
Not all browsers support it.
No, I'm only using onMouseOver, onMouseOut, and onMouseUp in the anchor tags.

I've set a browser detector up, and am using "window[]" or "eval()" depending on whether or not it's MSIE - this allows setting the value and changing the gif on the click, and the rollover works in IE, but not Mozilla. I can't spend any more time on it, I've wasted a lot of time on it already, but if anyone has any suggestions on how to get the rollover effect to work in Mozilla, I'll gladly spend a little more time on it.

Thanks, all, for your help.

WolfShade
^_^