setAttribute works in FF but not in IE

[tbullock]

Hello Forum,

I am using FireFox 3.0.1 and Internet Explorer 7.0. My operating system is Vista. My application is using client-side Javascript. It asks many questions of the user and saves user responses in variables. When the user has answered all questions, a report is produced directing the user to take action based on his answers to the questions.

Because there are very many questions, these are not presented all at one time. Instead they are grouped in a series of tables, each of which is presented in succession. By using code like this, for example:

    function showHideFormsA() {
        neededId = document.getElementById("adpf2");
        neededId.style.display="inline";
        neededId = document.getElementById("adpf3");
        neededId.style.display="none";
        neededId = document.getElementById("adpf4");
        neededId.style.display="none";
        neededId = document.getElementById("adpf9");
        neededId.style.display="inline";
    }
 

only the forms and tables within the forms that use the CSS "style.display='inline'" appear on the browser screen for the user to interact with. By changing 'inline' and 'none' in succession, the user is presented groups of questions at a time. He sees only the 'inline' questions. All others seem nonexistent.

With each group of questions there are different background colors that are displayed. The code to change colors is like this:

    function setColor1() {
        neededId = document.getElementById("bodyadp001");
         neededId.setAttribute("bgcolor","#FFFF78");
        neededId = document.getElementById("adptable2");
         neededId.setAttribute("bgcolor","#FFFF78");
        neededId = document.getElementById("adptable9");
         neededId.setAttribute("bgcolor","#FFFF78");
    }
 

This code uses the above color for the 'inline' group of questions on the screen. When the user has completed those questions, he presses a NEXT button and moves to the next group of questions. The scripts activated by the NEXT button cause the previous questions to be hidden by changing them to display='none' and cause the next group to applear by changing them to display='inline'. Different colors correspond to each group.

The above code works flawlessly in FF. In IE the system default color is "#FFFFFF", which is plain white. A co-worker and I have looked at the code in the FF debugging add-on tool. It showed that IE was using "#FFFFFF" and ignoring all the setAttribute action.

Since I am very new to Javascript, I am not up on what is unique to FF and not in other browsers. Would that be the problem? That is, is setAttribute not implemented in IE?

Can anyone suggest what to do to get the colors to change in IE?

Thanks much. All answers very appreciated!!

Tom

[mrhoo]

//cross-browser:

document.setStyle= function(who,what,val){
    if(typeof who== 'string') who= document.getElementById(who);
    if(who && who.style) who.style[what]= val;
}
 
function setColor1(){
    var s=document.setStyle, b='backgroundColor', v= '#FFFF78';
    s('bodyadp001',b,v);
    s('adptable2',b,v);
    s('adptable9',b,v);
}

[tbullock]

//cross-browser:

document.setStyle= function(who,what,val){
    if(typeof who== 'string') who= document.getElementById(who);
    if(who && who.style) who.style[what]= val;
}
 
function setColor1(){
    var s=document.setStyle, b='backgroundColor', v= '#FFFF78';
    s('bodyadp001',b,v);
    s('adptable2',b,v);
    s('adptable9',b,v);
}

Thank you, mrhoo!!

You gave me exactly what I needed. I installed it and it works in both browsers! Even better, you introduced me to a whole new depth of generalization or abstraction in the use of Javascript.

While this works very effectively, I am not sure I understand all that is going on. I will have to study this carefully.

Admin: Please consider this answered.