IE Mystery with className

JavaScript
1

I have a Web page that runs properly with IE 9 with the following code:


// Check for IE
   if (isBrowserIE) tempArray[i].setAttribute("className", "red");
   else tempArray[i].setAttribute("class", "red");

I have now created a new (separate) page that uses the SAME code–in fact, I did a copy and paste of the whole function containing this code segment from the page that works into the new page. However, the function (this if-statement in particular) does not work in the new page–the new page does NOT make the array item red. Thus using the same identical code, the older page worked (turned the text red) while the newer page did not.

This would seem to be an impossible scenario. Any ideas?

Incidently, the new page works on IE if I change “className” to “class”. But if this is required to make the code work on the new page, then the older page that still has “className” should not work, but it does!

Thanks so much.

Ken

2

Why not just use object detection?


if (tempArray[i].className) {
    tempArray[i].className = 'red';
} else if (tempArray[i].class) {
    tempArray[i].class = 'red';
}

With which we can then extract out the class parts in to their own function:


function setClass(el, className) {
    if (el.className) {
        el.className = className;
    } else if (el.class) {
        el.class = className;
    }
}

setClass(tempArray[i], 'red');
3

What is the document mode (document.documentMode) for the new and old page? Document mode used by IE9 (and IE8) depends on X-UA-Compatible header and also on location of your pages. Intranet pages are by default running in different mode than Internet pages.

4

Thanks, dherbolt. To answer your questions:

(1) The doctype and <head> statements are identical:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

   <title>Interactive Bible quiz Daniel Hard</title>
   <meta name="author" content="Ken and Carol Morgan" />
   <meta name="classification" content="Bible Study" />
   <meta name="description" content="Daniel very difficult interactive Bible quiz" />
   <meta name="keywords" content="Nebuchadnezzar, Belshazzar, Hananiah, Azariah, Ashpenaz" />
   <meta name="robots" content="index, follow" />
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="Content-Language" content="en-us" />
   <link rel="stylesheet" type="text/css" href="BibleStyleRules.css" />

Of course, the contents of the obvious meta statements differ–the new quiz is on Ezekiel. Nowhere do I have a line with X-UA or documentMode in either page. This is new to me. Some javascript is built into the two html pages, other sections brought in with src statements. The external js files are identical (used in many of our quizzes).

(2) Both pages belong to the same Web site, are accessed via the same menu, and are being tested using the Internet and our server.

Ken