CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer-8
Karl Anderson
Karl Anderson

Reputation: 34846

Bizarre IE8 error when using jQuery

I am getting a weird error in IE8 only, not in IE9. The error message is:

SCRIPT1028: Expected identifier, string or number

Here is my markup:

<style>
    .warrior { color: red; }
    .ninja  { color: blue; }
    .wizard { color: green; }
</style>

<div id="player"></div>
<script src="Scripts/jquery.min.js"></script>
<script>
    (function () { 
        "use strict"; 

        var joeBlow = {
            name: "Joe Blow",
            class: "ninja", 
            age: 35
        };
        $("#player").html(joeBlow.name + " " + joeBlow.age).addClass(joeBlow.class);
    }());
</script>

My expectation is that the DIV will have "Joe Blow 35" written in blue, but I am receiving the error above.

What is causing this to happen in IE8, but not IE9 or IE10?

Upvotes: 0

Views: 122

Answers (2)

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123423

As plalx explained, you'll have to quote class and use bracket notation for IE 8 to support using it as a property name since it's a reserved word.

var joeBlow = {
    name: "Joe Blow",
    'class': "ninja", 
    age: 35
};
$("#player").html(/* ... */).addClass(joeBlow['class']);

Or, use another name for the property. (Note: This is the option W3C chose for className.)

But, to explain further as to why:

It's due to a difference in the standards being used. Specifically, IE 8 implements ECMAScript 3 while IE 9 and 10 implement ECMAScript 5.

And, between those editions of ECMAScript, the syntax for Object initialisers and dot notation changed to allow any IdentifierNames (ES5), which include ReservedWords, rather than limiting them to just Identifiers (ES3).

Identifier :: IdentifierName but not ReservedWord

Upvotes: 2

plalx
plalx

Reputation: 43718

class is a reserved keyword. Put quotes around it 'class'. You may also have to access the property using the [] notation as in joeBlow['class'].

Upvotes: 6

Related Questions