javascript - IE9 unable to get property 'remove' of undefined or null reference - Stack Overflow

admin管理员组

文章数量:1427361

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

Share Improve this question Follow edited Oct 29, 2014 at 3:47 Nix asked Oct 29, 2014 at 3:39 NixNix 6,02844 gold badges3333 silver badges5353 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptIE9 unable to get property 39remove39 of undefined or null referenceStack Overflow