I am working on a site, where I sometimes need to load a big banner into my header. The header has some default styles, which I need to remove if the specific page has a banner. These extra styles are in a class, which is then removed server side if there is a banner present. It works across all browsers, except in IE9.

document.onreadystatechange = function () {
  // Initialize app when document is "ready"
  if (document.readyState == "plete") {

    var dom = {};
    dom.$header = document.querySelector('.js-header');
    dom.$banner = document.querySelector('.js-banner-image');

    resizeBanner();
  }
}

function resizeBanner(){
  if(dom.$banner && dom.$banner !== null && dom.$banner !== undefined) {
    dom.$header.classList.remove('has-no-banner');
  }
}

The browser halts when it tries to remove the class, because it is "unable to get property 'remove' of undefined or null reference". However, the variable is defined and the element exists in the DOM.

If I go to a page that doesn't have a banner, the function doesn't fire (this is expected behaviour), so logically it's not the conditional that's messed up, it finds dom.$banner just fine, but just to test I've tried giving the element an ID, and declare that right before my method. That did not solve the problem.

The script file is referenced in the bottom of my document with defer async.

What am I doing wrong here?

I am working on a site, where I sometimes need to load a big banner into my header. The header has some default styles, which I need to remove if the specific page has a banner. These extra styles are in a class, which is then removed server side if there is a banner present. It works across all browsers, except in IE9.

document.onreadystatechange = function () {
  // Initialize app when document is "ready"
  if (document.readyState == "plete") {

    var dom = {};
    dom.$header = document.querySelector('.js-header');
    dom.$banner = document.querySelector('.js-banner-image');

    resizeBanner();
  }
}

function resizeBanner(){
  if(dom.$banner && dom.$banner !== null && dom.$banner !== undefined) {
    dom.$header.classList.remove('has-no-banner');
  }
}

The browser halts when it tries to remove the class, because it is "unable to get property 'remove' of undefined or null reference". However, the variable is defined and the element exists in the DOM.

If I go to a page that doesn't have a banner, the function doesn't fire (this is expected behaviour), so logically it's not the conditional that's messed up, it finds dom.$banner just fine, but just to test I've tried giving the element an ID, and declare that right before my method. That did not solve the problem.

The script file is referenced in the bottom of my document with defer async.

What am I doing wrong here?

• javascript
• internet-explorer-9

1 Answer 1

The .classList property is not supported in IE9. Use a more traditional way of adding/removing classes as shown here: Adding and Deleting from objects in javascript