Problem w/Firefox interpreting a JavaScript

RetiredGeek

08-18-2004, 06:41 PM

:confused: This script works fine fine in IE but in FireFox 0.92 it keeps telling me that monName & frmCalendar are undeclared. Any enlightment would be appreciated.

File Edited: Highlighted problems in Red, Fixed comment to indicate correct data file name, Appended missing data file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>


<META http-equiv="pragma" content="no-cache">
<META http-equiv="Content-Type" content="text/html; charset=us-ascii">
<TITLE>Clarendon County Sesquicentennial Form Calendar</TITLE>
<LINK REL=stylesheet Type="text/css" HREF="clarendonhistory.css">
<STYLE type="text/css">

</STYLE>
<Script type="text/javascript" src="multiYrCalData.js"></Script>
<Script type="text/javascript">


if((curYear % 4 == 0) && (curYear % 100 != 0 || curYear % 400 == 0)){
maxdays[1] = 29 ;
}

now.setDate(1); //Set date to 1st of the month
ofsFD = now.getDay(); //Find the day of the week the month starts on

firstMonday = 7 - ofsFD + 2; //Compute the 1st, 2nd, & 3rd Monday of the month
if(firstMonday == 9) {
firstMonday = 2;
}
if(firstMonday == 8) {
firstMonday = 1;
}
secondMonday = firstMonday + 7 ;
thirdMonday = firstMonday + 14 ;
fourthMonday = firstMonday + 21;

ofsFirstThurs = 5-ofsFD; // > 0 if 1st day of month is before Thurs.
if (ofsFirstThurs > 0)
fourthThursday = 21 + ofsFirstThurs;
else
fourthThursday = 28 + ofsFirstThurs;

if(firstMonday<4) { // Compute last friday of Month
MemorialDay=fourthMonday + 7;
}
else {
MemorialDay = fourthMonday;
}

} // End of function SetMonth ***

function fDrawCal(){
document.write('<TABLE style="border-collapse: collapse;"><TR>');
document.write('<TD colspan="7" class="Month" id=monName>');
document.write(monNames[curMonth]+" "+curYear);
document.write('</TD>');
document.write('</TR>');
document.write('<TR>');
document.write('<TD class="DayHdr">SUN</TD>');
document.write('<TD class="DayHdr">MON</TD>');
document.write('<TD class="DayHdr">TUE</TD>');
document.write('<TD class="DayHdr">WED</TD>');
document.write('<TD class="DayHdr">THU</TD>');
document.write('<TD class="DayHdr">FRI</TD>');
document.write('<TD class="DayHdr">SAT</TD>');
document.write('</TR>');

for(i=0; i<6; i++) {
document.write('<TR>');
for(j=0; j<7; j++) {
document.write('<TD id=calDateText>');
document.write(myMon[i*7+j]);
document.write('</TD>');

}
document.write('</TR>');
}
document.write('</TABLE>');
} //End fDrawCal ***

function fUpdateCal(iMonth,iYear){
clrArray();
setmonth(iMonth,iYear);
fillmonth();
monName.innerHTML = monNames[curMonth]+" "+curYear ;
for(i=0; i<6; i++) {
for(j=0; j<7; j++) {
calDateText[i*7+j].innerHTML = myMon[i*7+j];
}
}
} //End fUpdateCal ***

function fInit(){
frmCalendar.tbSelMonth.options[curMonth].selected=true;
frmCalendar.tbSelYear.options[curYear-2003].selected=true;
}
clrArray();
setmonth(-1,-1);
fillmonth();

// End of JavaScript and HTML comment hiding it from browser -->
</Script>
</head>

<body onload="fInit()">

<FORM name="frmCalendar" id="frmCalendar" method="post" action="">
<INPUT type="hidden" name="calSelectDate" value="">
<TABLE>
<TR>
<TD style="border-style: none;">
<SPAN Class="wrapright">
<SELECT name="tbSelMonth" style="font-size: 12pt;"
onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
>
<OPTION VALUE="0">January</OPTION>
<OPTION VALUE="1">Feburary</OPTION>
<OPTION VALUE="2">March</OPTION>
<OPTION VALUE="3">April</OPTION>
<OPTION VALUE="4">May</OPTION>
<OPTION VALUE="5">June</OPTION>
<OPTION VALUE="6">July</OPTION>
<OPTION VALUE="7">August</OPTION>
<OPTION VALUE="8">September</OPTION>
<OPTION VALUE="9">October</OPTION>
<OPTION VALUE="10">November</OPTION>
<OPTION VALUE="11">December</OPTION>
</SELECT>
<SELECT name="tbSelYear" style="font-size: 12pt;"
onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
>
<OPTION VALUE="2003">2003</OPTION>
<OPTION VALUE="2004">2004</OPTION>
<OPTION VALUE="2005">2005</OPTION>
<OPTION VALUE="2006">2006</OPTION>
</SELECT>
</SPAN>
<SPAN Class="wrapleft">
<a href="index.html"><img border=0 width=128 height=25
src="images/homebtn.gif" alt=Home></a>
</SPAN>
</TD>
</TR>
<TR>
<TD style="border-style: none;">
<Script type="text/javascript">fDrawCal();</Script>
</TD>
</TR>
</Table>
</FORM>

</body>
</html>

---------------------- multiYrCalData.js ---------------------------
// Edit this file to add events to a given month.
// The subscript in the events array = the day of the month, i.e. events[15]
// is the 15th of the month. You can also use special items like firstMonday,
// secondMonday, thirdMonday, and fourthMonday, and thirdThursday [Thanksgiving]
// NOTE: the Month numbers are one less and are commented for clarity!
/******************************************************************************
***** MAKE SURE YOU PUT THE EVENT IN THE PROPER YEAR!!!!! *****
******************************************************************************/
// Editing Notes:
// Use <BR> to start the following text on a new line.
// <HR> to draw a line under the preceding text and start the following
// under the line.

jamescover

08-18-2004, 08:48 PM

Required files: CalendarData.js
<Script type="text/javascript" src="multiYrCalData.js"></Script><Script type="text/javascript">fDrawCal();</Script>???

A these would be where?

-james

hemebond

08-18-2004, 10:27 PM

monNames = new Arrayshould bevar monNames = new Arrayand for goodness sake, learn how to use the forums, and use code tags.

glenngv

08-19-2004, 04:31 AM

You're directly accessing the id like monName.innerHTML. You need to reference it properly by using

document.getElementById('monName')

and the form too

document.getElementById('frmCalendar')

or

document.forms['frmCalendar']

IE allows you to call it directly because all element names and ids are automatically treated as global variables. :rolleyes:

RetiredGeek

08-19-2004, 07:32 PM

A big thank you to jamescover, hemebond, and glenngv :thumbsup: for your helpful and enlightening input. I have posted the corrected code below which now works just fine in both IE & Firefox .092. I would like to point out to other new and casual javascript coders, like me, glenngv's comment about how IE treats Name & Id as globals. This explained a lot especially a piece of the code that I never did understand why it worked, given my background in other languages.

To view the code in action goto www.clarendonhistory.com and click on the calendar icon.

Thanks again gentlemen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>


<META http-equiv="pragma" content="no-cache">
<META http-equiv="Content-Type" content="text/html; charset=us-ascii">
<TITLE>Clarendon County, SC - Sesquicentennial Calendar</TITLE>
<LINK REL=stylesheet Type="text/css" HREF="clarendonhistory.css">
<STYLE type="text/css">

</STYLE>
<Script type="text/javascript" src="multiYrCalData.js"></Script>
<Script type="text/javascript">

</Script>
</head>

<body onload="fInit()">

<FORM name="frmCalendar" id="frmCalendar" method="post" action="">
<INPUT type="hidden" name="calSelectDate" value="">
<TABLE>
<TR>
<TD style="border-style: none;">
<SPAN Class="wrapright">
<SELECT name="tbSelMonth" style="font-size: 12pt;"
onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
>
<OPTION VALUE="0">January</OPTION>
<OPTION VALUE="1">Feburary</OPTION>
<OPTION VALUE="2">March</OPTION>
<OPTION VALUE="3">April</OPTION>
<OPTION VALUE="4">May</OPTION>
<OPTION VALUE="5">June</OPTION>
<OPTION VALUE="6">July</OPTION>
<OPTION VALUE="7">August</OPTION>
<OPTION VALUE="8">September</OPTION>
<OPTION VALUE="9">October</OPTION>
<OPTION VALUE="10">November</OPTION>
<OPTION VALUE="11">December</OPTION>
</SELECT>
<SELECT name="tbSelYear" style="font-size: 12pt;"
onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
>
<OPTION VALUE="2003">2003</OPTION>
<OPTION VALUE="2004">2004</OPTION>
<OPTION VALUE="2005">2005</OPTION>
<OPTION VALUE="2006">2006</OPTION>
</SELECT>
</SPAN>
<SPAN Class="wrapleft">
<a href="index.html"><img border=0 width=128 height=25
src="images/homebtn.gif" alt=Home></a>
</SPAN>
</TD>
</TR>
<TR>
<TD style="border-style: none;">
<Script type="text/javascript">fDrawCal();</Script>
</TD>
</TR>
</Table>
</FORM>

</body>
</html>

glenngv

08-20-2004, 03:39 AM

Glad to be of help. :)

Just additional info.
This line:

<SELECT name="tbSelMonth" style="font-size: 12pt;"
onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
>

can be optimized to:

<SELECT name="tbSelMonth" style="font-size: 12pt;"
onchange="fUpdateCal(this.value, this.form.tbSelYear.value)"
>

Notice that it doesn't rely on the name of the form to refer to the form by using the this keyword and the form property. The this keyword refers to the current element which is the select control. Every HTML control has form property that refers to the form the control belongs to. So this.form refers to the form the select control belongs to, which is the same form the other select control in the function arguments also belongs to.

Note: Other browsers don't accept select.value. The proper way is:

select.options[select.selectedIndex].value

But IE and Gecko-based browsers accept the shortcut version. The only browser I know that doesn't like the shortcut is Netscape4.x. Not sure on other browsers like Opera and Safari. But definitely, if you want to get the text property of the selected option, you need to use the longer code.

select.options[select.selectedIndex].text

So my suggestion is to always use the longer code for getting select values.

<SELECT name="tbSelMonth" style="font-size: 12pt;"
onchange="fUpdateCal(this.options[this.selectedIndex].value, this.form.tbSelYear.options[this.form.tbSelYear.selectedIndex].value)"
>