Issues have been identified with the JavaScript code when running on Firefox, IE7, and IE6 (IE8 worked after applying getElementsByClassName.polyfill.js). Can anyone pinpoint the problem in the script that is causing these browsers to malfunction? (Chrome and Safari were functioning properly before the polyfill.js was added.)
The purpose of this JavaScript is to allow users to open and close multiple levels of categories by clicking.
/*------------------------------------------
Open or close the specified node.
------------------------------------------*/
function openOrClose(tgt){
// Make the list visible if it is currently hidden.
if(tgt.style.visibility == "hidden"){
tgt.style.display = "block";
tgt.style.visibility = "visible";
tgt.style.height = "auto";
tgt.style.paddingTop = "0.25em";
tgt.style.lineHeight = "1em";
tgt.style.opacity = 1.0;
}
// Hide the list if it is not hidden.
else{
tgt.style.display = "none";
tgt.style.visibility = "hidden";
tgt.style.height = "0px";
tgt.style.paddingTop = "0";
tgt.style.lineHeight = 0;
tgt.style.opacity = 0;
}
}
/*------------------------------------------
Open the list
------------------------------------------*/
function listopen(lv, num){
var tgt = document.getElementsByClassName("level" + lv)[num];
// Search for the next level to open the next level list.
for(var i=0; i < document.getElementsByClassName("level" + (lv+1)).length; i++){
var next_tgt = document.getElementsByClassName("level" + (lv+1))[i];
if (next_tgt.parentNode == tgt || next_tgt.parentNode.parentNode == tgt){
openOrClose(next_tgt);
}
}
// Change the shape of the button displayed in the next level.
for(var i=0; i < tgt.childNodes.length; i++){
var next_tgt = tgt.childNodes[i];
if(next_tgt.tagName == "UL"){
if(next_tgt.style.height == "0px"){
if(event.srcElement.parentNode.className == "category_header plus"){
event.srcElement.innerText = '?';
event.srcElement.parentNode.className = "category_header minus";
}
next_tgt.style.height = "auto";
}
else{
for(var i=0; i<next_tgt.parentNode.childNodes.length; i++){
if(event.srcElement.parentNode.className == "category_header minus"){
event.srcElement.innerText = '＋';
event.srcElement.parentNode.className = "category_header plus";
}
}
next_tgt.style.height = "0px";
}
}
}
}
/*------------------------------------------
Set up the click event
------------------------------------------*/
function setclickevent(tgt, lv, num){
if(lv!=1){
tgt.style.visibility = "hidden";
tgt.style.display = "none";
tgt.style.height = "0px";
tgt.style.lineHeight = 0;
tgt.style.paddingTop = 0;
tgt.style.paddingBottom = 0;
if(tgt.parentNode.tagName == "UL"){
tgt.parentNode.style.height = "0px";
tgt.parentNode.style.margin = "0";
tgt.parentNode.style.padding = "0";
tgt.parentNode.style.border = "none";
}
}
var hasLink_flg;
if(tgt.childNodes.length){
for (var j = 0; j < tgt.childNodes.length; j++) {
if(tgt.childNodes[j].tagName == 'A'){
tgt.setAttribute('onclick', 'location.href="' +
tgt.childNodes[j].getAttribute('href') + '"');
}
else if(tgt.childNodes[j].tagName == 'UL'){
var linkObj = document.createElement("a");
linkObj.innerText = '＋';
tgt.childNodes[0].className="category_header plus";
tgt.childNodes[0].appendChild(linkObj);
j++;
linkObj.parentNode.setAttribute('onclick', 'listopen(' + lv + ',' + num + ')');
break;
}
}
}
}
// Initialization - Add click events to all nodes with the class "level?"
function initCategoryList(){
var lv = 0;
while(document.getElementsByClassName("level" + (++lv)).length){
for (var i = 0; i < document.getElementsByClassName("level" + lv).length; i++) {
setclickevent(document.getElementsByClassName("level" + lv)[i], lv, i);
}
}
}