Javascript toggle not working in IE

JavaScript
1

Hi this is some pretty simple JS which shows / hides a transcript on the page. I dont use Jquery because we are not allowed the library in our CMS.
It works as expected in all browsers but IE - anyone know why it would fail?

// define a new function called addLoadEvent which takes in one param which should be function
function addLoadEvent(func) {
 // assign window.onload event to variable oldonload
var oldonload = window.onload; 
// if window.onload is not a function,  and thus has never been defined before elsewhere
if (typeof window.onload != 'function') {
    // assign 'func' to window.onload event. set the function you passed in as the onload function
    window.onload = func;
  } else {           
    // if window.onlad is a function - dont overwrite it
    window.onload = function() { 
      // define a new onload function that does the following:
      //do whatever the old onload function did
      oldonload();
      //and then do whatever your new passed in function does
      func();      
    }
  }
}
var fn = function(){
  var style = document.createElement('style');
  style.setAttribute('type', 'text/css');
  var styles = document.createTextNode('.transcript-hide {display: none;} .transcript-show {display: block;}');
  style.appendChild(styles);
  var head = document.getElementsByTagName('head')[0].appendChild(style);
  var divs = document.getElementsByTagName('div');
  for (d in divs) {
    if(divs[d].className == 'ou-transcript') {
      divs[d].className = divs[d].className + ' transcript-hide';
    } else if(divs[d].className == 'ou-clip') {
      var p = document.createElement('p');
      var a = document.createElement('a');
      var t = document.createTextNode('Show transcript');
      a.setAttribute('href', '#');
      a.className = 'ou-toggle';
      a.onclick = function(){toggleTranscript(this.parentNode.parentNode); if(this.childNodes[0].nodeValue == 'Show transcript') {this.childNodes[0].nodeValue = 'Hide transcript'} else {this.childNodes[0].nodeValue = 'Show transcript'} return false};
      a.appendChild(t);
      p.appendChild(a);
      divs[d].appendChild(p);
    }
  }
};
function toggleTranscript(element) {
  var transcript = element.nextSibling;
  if(!transcript.className) {
    transcript = transcript.nextSibling;
  }
  var classes = transcript.className.split(' ');
  for(c in classes) {
    if(classes[c] == 'transcript-hide') {
      delete classes[c];
      classes.push('transcript-show');
      break;
    } else if(classes[c] == 'transcript-show') {
      delete classes[c];
      classes.push('transcript-hide');
      break;
    }
  }
  transcript.className = classes.join(' ');
}
// call function
addLoadEvent(fn);

Steven

2

If it works in IE9, but fails in IE8 and earlier, then the problem is here:

var fn = function(){
  var style = document.createElement('style');
  style.setAttribute('type', 'text/css');
  var styles = document.createTextNode('.transcript-hide {display: none;} .transcript-show {display: block;}');
  style.appendChild(styles);
  var head = document.getElementsByTagName('head')[0].appendChild(style);

Those lines to create a style tag and style rules will not work in IE8 and earlier.
Try the following modification:

  var style = document.createElement('style');
  style.type = 'text/css';
  var styles = document.createTextNode('.transcript-hide {display: none;} .transcript-show {display: block;}');
  if (style.styleSheet) 
    style.styleSheet.cssText = styles.nodeValue;
  else
    style.appendChild(styles);
  var head = document.getElementsByTagName('head')[0].appendChild(style);