I get the error `Assignment to read-only properties is not allowed in strict mode' on this line of my code:

wrapper.style = 'transition: transform 3s;';

This is a chunk of the function it's in:

'use strict';
function work() {
  var wrapper = document.getElementById( 'wrp' ),
  infoPage = document.getElementById( 'i-pg' ),
  body = document.getElementById( 'body' ),

  carA = document.getElementById( 'car-a' ),
  keyA = document.getElementById( 'key-a' ),
  manualA = document.getElementById( 'manual-a' ),
  wheelA = document.getElementById( 'wheel-a' );

  if( this.id === 'info' ) {
    wrapper.style = 'transition: transform 3s;'; //PROBLEM LINE
    wrapper.classList.add( 'up' );
    body.classList.add( 'dark' );
    infoPage.classList.remove( 'down' );
  }
}

This code works perfectly in all modern browsers i've tested. Only in IE11 is this breaking the entire site, stopping all subsequent lines from running.

If I take out the first line: 'use strict'; everything works fine. Is there a simple fix while keeping strict mode on? Or just target IE11 and somehow remove strict mode for that browser?

There might be a better approach.

I get the error `Assignment to read-only properties is not allowed in strict mode' on this line of my code:

wrapper.style = 'transition: transform 3s;';

This is a chunk of the function it's in:

'use strict';
function work() {
  var wrapper = document.getElementById( 'wrp' ),
  infoPage = document.getElementById( 'i-pg' ),
  body = document.getElementById( 'body' ),

  carA = document.getElementById( 'car-a' ),
  keyA = document.getElementById( 'key-a' ),
  manualA = document.getElementById( 'manual-a' ),
  wheelA = document.getElementById( 'wheel-a' );

  if( this.id === 'info' ) {
    wrapper.style = 'transition: transform 3s;'; //PROBLEM LINE
    wrapper.classList.add( 'up' );
    body.classList.add( 'dark' );
    infoPage.classList.remove( 'down' );
  }
}

This code works perfectly in all modern browsers i've tested. Only in IE11 is this breaking the entire site, stopping all subsequent lines from running.

If I take out the first line: 'use strict'; everything works fine. Is there a simple fix while keeping strict mode on? Or just target IE11 and somehow remove strict mode for that browser?

There might be a better approach.

• javascript
• css
• internet-explorer-11

• can you try this wrapper['style'] = 'transition: transform 3s;'; – CognitiveDesire Commented Mar 27, 2017 at 19:24

3 Answers 3

Why not fix it, instead of ignoring the error?

wrapper.style.transition = 'transform 3s;';

I think you might get an errror cause you're trying to assign a transform 3s to style property, while actually you should assign it to a transition property. Like this: wrapper.style.transition = 'transform 3s';

Checkout:

https://devtidbits./2016/06/12/assignment-to-read-only-properties-is-not-allowed-in-strict-mode/#ment-1611

Apparently you're supposed to use this something like

myEle.style.cssText = "color: red;" // or
myEle.setAttribute("class", "myClass"); // Multiple style properties
//For newly created style sheet objects, you must first append the element to the document before you can set cssText.

However I still get the same error even after applying that fix...