I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChange event. The function works perfectly other places however, I have a couple of places on the page where it works when I check the checkbox, but the event doesn't even seem to fire when I uncheck it. Here is the JavaScript function:

function tabModifiedHighlight(){
    alert("alert");
    var div, i, input, inputIndex, selects, selectIndex, selectedTab, highlighted;
    var tabs = new Array("admissioninformation","diet","vitalsigns","activities","nursing","ivfluids","medications1","medications2","labs","respiratory","diagnostic","consultations");
    for(i=0; i<(tabs.length); i++){
        selectedTab = tabs[i]+'tab';
        if (document.getElementById(selectedTab).className == "selectedtab"){
            div = document.getElementById(tabs[i]),
            input = div.getElementsByTagName('input'),
            selects = div.getElementsByTagName('select');
            break;
        }
     }
    highlighted = false;
    for (inputIndex = 0; inputIndex < input.length; inputIndex++){
        if (input[inputIndex].checked == true){
        highlighted = true;
    }               
}
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
    if (input[inputIndex].type == 'text' && input[inputIndex].value != ""){
        highlighted = true;
    }               
}
for (selectIndex = 0; selectIndex < selects.length; selectIndex++){
    if (selects[selectIndex].value != ""){
        highlighted = true;
    }               
}
if (highlighted == true){
    document.getElementById(selectedTab).style.backgroundColor = "#FF0";
}
else {
    document.getElementById(selectedTab).style.backgroundColor = "#F0F0F0";
}

}

And here is the input that is calling it:

<input name="cbMedTylenolPO" id="cbMedTylenolPO" type="checkbox" value="PO" onClick="tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2'); tabModifiedHighlight();" />

This page has multiple "tabs" which are just divs that are set to visible or hidden based on which one is selected. It seems consistent in that it works everywhere except for 2 of the tabs, and nowhere on those tabs. The only other difference I can see is that the ones that are not working are also showing or hiding divs within the tab, based on whether the checkbox is checked or not. I have added the alert at the very beginning of the function to see if it is firing or not, and it does when checking the checkbox, but not when unchecking.

I hope I made this clear, and any thoughts are appreciated!

I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChange event. The function works perfectly other places however, I have a couple of places on the page where it works when I check the checkbox, but the event doesn't even seem to fire when I uncheck it. Here is the JavaScript function:

function tabModifiedHighlight(){
    alert("alert");
    var div, i, input, inputIndex, selects, selectIndex, selectedTab, highlighted;
    var tabs = new Array("admissioninformation","diet","vitalsigns","activities","nursing","ivfluids","medications1","medications2","labs","respiratory","diagnostic","consultations");
    for(i=0; i<(tabs.length); i++){
        selectedTab = tabs[i]+'tab';
        if (document.getElementById(selectedTab).className == "selectedtab"){
            div = document.getElementById(tabs[i]),
            input = div.getElementsByTagName('input'),
            selects = div.getElementsByTagName('select');
            break;
        }
     }
    highlighted = false;
    for (inputIndex = 0; inputIndex < input.length; inputIndex++){
        if (input[inputIndex].checked == true){
        highlighted = true;
    }               
}
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
    if (input[inputIndex].type == 'text' && input[inputIndex].value != ""){
        highlighted = true;
    }               
}
for (selectIndex = 0; selectIndex < selects.length; selectIndex++){
    if (selects[selectIndex].value != ""){
        highlighted = true;
    }               
}
if (highlighted == true){
    document.getElementById(selectedTab).style.backgroundColor = "#FF0";
}
else {
    document.getElementById(selectedTab).style.backgroundColor = "#F0F0F0";
}

}

And here is the input that is calling it:

<input name="cbMedTylenolPO" id="cbMedTylenolPO" type="checkbox" value="PO" onClick="tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2'); tabModifiedHighlight();" />

This page has multiple "tabs" which are just divs that are set to visible or hidden based on which one is selected. It seems consistent in that it works everywhere except for 2 of the tabs, and nowhere on those tabs. The only other difference I can see is that the ones that are not working are also showing or hiding divs within the tab, based on whether the checkbox is checked or not. I have added the alert at the very beginning of the function to see if it is firing or not, and it does when checking the checkbox, but not when unchecking.

I hope I made this clear, and any thoughts are appreciated!

• javascript
• html
• internet-explorer-6
• onchange

1 Answer 1

As your code is not working only for two tabs, and working for all others its not an browser patibility issue.
onClick if checkbox you are calling these 3 methods tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()

Note tabModifiedHighlight is last one..

if any of first two methods tylenolPoShowHide or checkBoxHighlight fails... then tabModifiedHighlight will not be called.

I will suggest to add alert as first and last line in both tylenolPoShowHide and checkBoxHighlight ...

It will help you find which one is actually failing then you can add that code here and we will be able to help you further