/    Sign up×
Community /Pin to ProfileBookmark

JavaScript error in FireFox when using DOCTYPE

I have some javascript code that errors in FireFox, but only when I use a DOCTYPE expression at the top of the page – until I added that, it worked fine in both IE and FireFox.

Here is the declaration at the top of my page:

[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>[/CODE]

This function errors claiming that divBtContinue does not exist (and if I comment out that line I’m told divBtSubmit doesn’t exist etc):

[CODE]function PostToFile()
{
var isValid;

//validate form fields excluding ssn
var isValid = checkFields(document.faForm,0);

if (isValid)
{

//hide continue button
divBtContinue.style.display = “none”;

//show submit button
divBtSubmit.style.display = “”;

//show SSN question
divSSN.style.display = “”;

SetFormValues();
document.frmBackPost.submit();
//alert(‘submitted’);

}[/CODE]

The object that supposedly doesn’t exist is the same object who’s onclick invokes the function in the first place:

[CODE]<tr>
<td align=”center”><div id=’divBtContinue’><input type=button value=”Continue” onClick=”PostToFile();”></div></td>
</tr>[/CODE]

Again, this works fine in IE with or without the DOCTYPE. In FireFox it works but only without the DOCTYPE. Anyone know how I can change this to work in FireFox without losing my DOCTYPE? Thanks.

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@mrhooMay 14.2007 — xhtml requires empty elements to have closing tags.

Why not use an html doctype? Or close the tags, starting with this one-

<input type=button value="Continue" onClick="PostToFile();">

[B]<input type=button value="Continue" onClick="PostToFile();" />[/B]
Copy linkTweet thisAlerts:
@KorMay 14.2007 — not only this.

XHTML needs to use CDATA islands to isolate the javascript codes (or any other codes) from the XML interpretor
<i>
</i>&lt;script type="text/javascript"&gt;
[COLOR="Red"]/*&lt;![CDATA[*/[/COLOR]
... your code here ...
[COLOR="Red"]/*]]&gt;*/[/COLOR]
&lt;/script&gt;


Further more, you must use lowercase for the event handlers, and double quotes for the HTML attributes:
<i>
</i>&lt;div id=[COLOR="Red"]"[/COLOR]divBtContinue[COLOR="Red"]"[/COLOR]&gt;&lt;input type=[COLOR="Red"]"[/COLOR]button[COLOR="Red"]"[/COLOR] value="Continue" on[COLOR="Red"]c[/COLOR]lick="PostToFile();" /&gt;&lt;/div&gt;


Off the line question: Why have you nested the button inside a DIV. What's the use?
Copy linkTweet thisAlerts:
@FangMay 14.2007 — Correct referencing of objects:document.getElementById('divBtContinue').style.display = "none";
×

Success!

Help @Bombtrack spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...