Welcome to WebmasterWorld Guest from 18.204.48.199

Forum Moderators: open

Message Too Old, No Replies

Form works IE - not in Firefox unless I remove the DTD

     
3:33 am on Sep 9, 2008 (gmt 0)

New User

10+ Year Member

joined:Sept 9, 2008
posts:7
votes: 0


Hello,

I have just created a javascript code that acts as a very simple time zone converter. The page I need to place it on has the following doctype which cannot be altered:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

That's where the issues with Firefox come in. Here's the issue in a nutshell:
>If I use the code in IE WITHOUT the doctype, it works perfectly.
>If I use the code in IE WITH the doctype, it works perfectly.
>If I use the code in Firefox WITHOUT the doctype, it works perfectly.

But here's the problem - If I use the code in Firefox WITH the doctype, it doesn't work at all.

The complete code is listed below - I spaced out the javascript portion away from the HTML for easier viewing:

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

<div align="center">
<table border="5" cellpadding="5" bgcolor="navy">
<tr><td align="center">
<font size="5" color="white"><i><b><u>Time Zone Converter</u></b></i></font>
<form name="Calc">

<script>
function run() {
if (Calc.enter.value == 12) {
timing = "0";
}
else {
timing = Calc.enter.value;
}

if (Calc.enter.value > 12 Calc.enter.value < 1) {
Calc.output.value = "Invalid";
}
else {
place = (timing - Calc.select1.value)+Calc.select2.value*1;

if (Calc.selecter.value == 2 && place > 11.9 && place < 23.9) {
tracker = "AM";
}
else if (Calc.selecter.value == 2 && place > 23.9) {
tracker = "PM";
}
else if (Calc.selecter.value == 2 && place < 11.9 && place > -.1) {
tracker = "PM";
}
else if (Calc.selecter.value == 2 && place < -.1 && place > -12.1) {
tracker = "AM";
}
else if (Calc.selecter.value == 2 && place < -12.1) {
tracker = "PM";
}
else if (Calc.selecter.value == 1 && place > 11.9 && place < 23.9) {
tracker = "PM";
}
else if (Calc.selecter.value == 1 && place > 23.9) {
tracker = "AM";
}
else if (Calc.selecter.value == 1 && place < 11.9 && place > -.1) {
tracker = "AM";
}
else if (Calc.selecter.value == 1 && place < -.1 && place > -12.1) {
tracker = "PM";
}
else if (Calc.selecter.value == 1 && place < -12.1) {
tracker = "AM";
}

if (place > 24) {
Calc.output.value = place-24 + ":" + Calc.enter2.value + " " + tracker;
}
else if (place > 12) {
Calc.output.value = place-12 + ":" + Calc.enter2.value + " " + tracker;
}
else if (place > 0) {
Calc.output.value = place + ":" + Calc.enter2.value + " " + tracker;
}
else if (place > -12) {
Calc.output.value = place+12 + ":" + Calc.enter2.value + " " + tracker;
}
else if (place > -24) {
Calc.output.value = place+24 + ":" + Calc.enter2.value + " " + tracker;
}
}
}
</script>

<font color="white"><b>Time of the Event: </b></font><input type="text" name="enter" SIZE="1" maxlength="2" onChange="run()"><font size="5" color="white"><b>:</b></font><input type="text" name="enter2" SIZE="1" maxlength="2" onChange="run()">

<select name="selecter">
<option name="AM" value="1" onClick="run()">AM</option>
<option name="PM" value="2" onClick="run()">PM</option>
</select>
<select name="select1">
<option value="-7" onClick="run()">Pacific USA</option>
<option value="-6" onClick="run()">Mountain USA</option>
<option value="-5" onClick="run()">Central USA</option>
<option value="-4" onClick="run()">Eastern USA</option>
<option value="0" onClick="run()">GMT/UTC</option>
<option value="1" onClick="run()">BST</option>
<option value="8" onClick="run()">Western Austrailia (AWST)</option>
<option value="10" onClick="run()">Eastern Austrailia (AEST)</option>
</select>
<br><br>
<font color="white"><b>Converted to:</b></font>
<select name="select2">
<option value="-7" onClick="run()">Pacific USA</option>
<option value="-6" onClick="run()">Mountain USA</option>
<option value="-5" onClick="run()">Central USA</option>
<option value="-4" onClick="run()">Eastern USA</option>
<option value="0" onClick="run()">GMT/UTC</option>
<option value="1" onClick="run()">BST</option>
<option value="8" onClick="run()">Western Austrailia (AWST)</option>
<option value="10" onClick="run()">Eastern Austrailia (AEST)</option>
</select>
<font size="4" color="white"><b>=</b></font>
<input type="text" readonly="readonly" name="output" SIZE="6">
<input type="button" onClick="run()" value="Convert!">
</form>
</td></tr>
</table>
</div>

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

I imagine that some part of the script is somehow incompatible with the doctype only in Firefox, but have tried many things so far that simply haven't worked.

Could someone please take a look at this and see if there is any reason as to why this works in IE, but not in Firefox?

Help would be greatly appreciated. Thanks!

8:32 am on Sept 9, 2008 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there SomePerson6,

and a warm welcome to these forums. ;)

Add var Calc=document.Calc; as indicated...


<script>[blue]
var Calc=document.Calc;[/blue]
function run() {
if (Calc.enter.value == 12) {
...
...


birdbrain
11:04 pm on Sept 9, 2008 (gmt 0)

New User

10+ Year Member

joined:Sept 9, 2008
posts:7
votes: 0


Thank you for the welcome as well as the solution! Works great, all seems to work perfectly now.
7:52 am on Sept 10, 2008 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


No problem, you're welcome. ;)