Ecmascript/Javascript works with Internet Explorer but NOT FireFox Why?

We have this fun example of how our EcmaScript/JavaScript Obfusc开发者_如何学编程ator works. We provide links that show the unobfuscated and obfuscated Ecmascript source for a "dynamic clock". When you press the start button you will see that the clock graphic parts follow your mouse movements and when you stop moving the mouse it forms a ticking circular clock.

See here ... http://www.semdesigns.com/Products/Obfuscators/ECMAScriptObfuscationExample.html

The issue that both the un-obfuscated and obfuscated code works fine with Internet Explorer but not with FireFox. So what is the difference between EcmaScript for FireFox and Internet Explorer that results in this code working with Internet Explorer but not with FireFox is the question? I have tried this several versions of FireFox including the latest version and all fail.

---

First place to check is the "Error Console" or your Firebug console - finding it depends on your version of Firefox and whether or not you have Firebug installed.

I immediately found this in the console when trying out your page:

Error: document.getElementById("mzSeconds" + i) is null
Source File: http://www.semdesigns.com/Products/Obfuscators/UnobfuscatedJavaScriptMouseClock.js.txt
Line: 19

---

Update

Having found the error, and with Dexter and jfriend00 having pointed out why you're getting the error in the first place, we can see that the difference between IE and "all other" browsers in this case is not how they execute EcmaScript, but in how they construct the DOM in the face of HTML errors -- missing closing quotes on attributes in your case. (Though there are script differences those are not relevant here)

Your document.write() would output <div id="mzSeconds0 style="position:..."> which is invalid, leading to another debugging tool: validation.

If CSS rules or Javascript code behave strangely or inconsistently across browsers it's a good idea to validate your HTML (at validator.w3.org) because invalid HTML will be parsed in different ways by different browsers.

---

Your immediate problem is that you are generating invalid HTML code, appending it to the DOM, and then trying to find it again using document.getElementById.

The offending section is line 100 of UnobfuscatedHTMLPage.html, which contains this line:

document.write('<div id="'+(('mzSeconds'))+i+' style="position:absolute;top:0px;left:0px" width="15" height="15"><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></div>');

You're missing the closing " immediately after id="'+(('mzSeconds'))+i+', which causes the id of the div tag to be processed incorrectly in IE (two wrongs making a right, in this case).

There are a number of similar errors in that section of code - you'll need to fix them all (by debugging your code in Firebug or Chrome Developer tools) before your code will be valid and work in non-IE browsers.

---

A very simple look in the debug console of any browser that it doesn't work in would show you where the error was (I used Chrome). Then, a look at the DOM would show you why that error occurred. Use your debugging tools to find your problems.

I think the root issue is that when you generate your HTML, you are missing some closing quotes. That creates illegal HTML which different browsers barf on differently.

The first error in your code is triggered because no object with id="mzSeconds0" exists. This is caused because you are missing a closing double quote in this line:

document.write('<div id="'+(('mzSeconds'))+i+' style="position:absolute;top:0px;left:0px" width="15" height="15"><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></div>');

It should be this with the closing double quote at the end of id="mzSeconds0":

document.write('<div id="'+(('mzSeconds'))+i+'" style="position:absolute;top:0px;left:0px" width="15" height="15"><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></div>');

I think the same error exists on most of these types of lines and you will need to fix them all.

---

Checking a debugger yields: document.getElementById("mzSeconds" + i) is null and also includes line numbers and stack trace which should make fixing your bug easy.

The cause is that you are throwing invalid HTML to the browser which need to try to correct it somehow. Obviously you end up having a different DOM in IE an Firefox.

document.write('<div id="'+(('mzMinutes'))+i+' style="position:absol…

I still don't see the use of obfuscating JavaScript or writing code in your style. Write HTML directly instead of misusing JavaScript to do so. When you need to create content from JavaScript, then use DOM functions instead of document.write. This would have saved you from this bug.

When you are running your code to a debugger (Firebug), you'll find other bug popping up. Please do also have a look at JavaScript strict mode because it would probably save you a lot of time by pointing out bad practices.