I have a fairly plex piece of Javascript that works flawlessly with no errors in Google Chrome, Firefox, Safari, and Opera. However, as tends to always be the endlessly annoying case, it pletely fails in Internet Explorer. I have tested in IE7 and IE8 and get the same error:

Invalid argument. prototype.js, line 2216, character 9

I am using Prototype 1.6.1 hosted through Google. The error given isn't very helpful since it doesn't tell me where in my actual code the error is occurring. The line mentioned in the error is the 6th line from the bottom in the following code:

setStyle: function(element, styles) {
    element = $(element);
    var elementStyle = element.style, match;
    if (Object.isString(styles)) {
      element.style.cssText += ';' + styles;
      return styles.include('opacity') ?
        element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) : element;
    }
    for (var property in styles)
      if (property == 'opacity') element.setOpacity(styles[property]);
      else
        elementStyle[(property == 'float' || property == 'cssFloat') ?
          (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
            property] = styles[property];

    return element;
  },

Since it is in the setStyle block of code, I assume the error occurs when I am setting style attributes for some element. However, I call setStyle over 100 times in this script and have been trying to figure out where exactly the error is occurring for several hours. Is there anything I can do to help myself in finding where the error is occurring?

I have a fairly plex piece of Javascript that works flawlessly with no errors in Google Chrome, Firefox, Safari, and Opera. However, as tends to always be the endlessly annoying case, it pletely fails in Internet Explorer. I have tested in IE7 and IE8 and get the same error:

Invalid argument. prototype.js, line 2216, character 9

I am using Prototype 1.6.1 hosted through Google. The error given isn't very helpful since it doesn't tell me where in my actual code the error is occurring. The line mentioned in the error is the 6th line from the bottom in the following code:

setStyle: function(element, styles) {
    element = $(element);
    var elementStyle = element.style, match;
    if (Object.isString(styles)) {
      element.style.cssText += ';' + styles;
      return styles.include('opacity') ?
        element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) : element;
    }
    for (var property in styles)
      if (property == 'opacity') element.setOpacity(styles[property]);
      else
        elementStyle[(property == 'float' || property == 'cssFloat') ?
          (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
            property] = styles[property];

    return element;
  },

Since it is in the setStyle block of code, I assume the error occurs when I am setting style attributes for some element. However, I call setStyle over 100 times in this script and have been trying to figure out where exactly the error is occurring for several hours. Is there anything I can do to help myself in finding where the error is occurring?

• javascript
• internet-explorer
• prototypejs
• invalid-argument

• The problem is very likely that you're trying to set a style property to some invalid value. As a side note, doing your loop that way (for ... in) is pretty dangerous, especially when you're using Prototype. You should include a check for hasOwnProperty at least. – Pointy Commented Nov 1, 2010 at 17:42
• That isn't my code, that is Prototype. – James Simpson Commented Nov 1, 2010 at 17:53
• @Pointy, hahaha... but wait... Prototype.js does not extend Object.prototype with any extra property, so why laugh? – meandre Commented Oct 12, 2012 at 17:04
• @meandre well I'm not exactly sure, as I wrote that two years ago, but I think I "laughed" because I though that the code was code the OP had written. I agree that in this case for ... in is probably not a "risky" thing. – Pointy Commented Oct 12, 2012 at 17:07

5 Answers 5

Put an explicit try ... catch around the code:

for (var property in styles) {
  try {
    if (property == 'opacity') element.setOpacity(styles[property]);
    else
      elementStyle[(property == 'float' || property == 'cssFloat') ?
        (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
          property] = styles[property];
  }
  catch (_) {
    throw "Error setting property '" + property + "' to value '" + styles[property] + "'";
  }
}

Then you'll know exactly what property and value is causing the problem.

In IE8 enable the developer tool to break on error [5th button on the script tab.] Click the Start Debugging button.

When the error occurs, you should be able to inspect the varaibles and see what is causing the problem exactly.

Try debugging with Microsoft® Visual Web Developer® 2010 Express, it's free and very easy to use while debugging on IE.

You've already marked your chosen answer so have probably found the cause by now. The line in question concerns setting opacity (which IE handles as it's proprietary filter) so I suggest looking for calls to setStyle that set an opacity, perhaps ones that set an unusual value.

The problem is caused by setStyle({someProperty: null}). Maybe also undefined or something kind of.

To investigate such problems in future, inspect arguments you give to third-party functions in catch block. Kind of

try{
  element.setStyle({someProperty: someValue})
}catch(error){
  throw('' + someProperty + ':' + someValue)
}

This code would have pointed you to the source of the error in zero time. Here is more detailed snippet for debugging this case using some Prototype.js' helpers:

;(function () {
  var superFunction = Element.setStyle
  Element.addMethods({
    setStyle: function (element, _arguments) {
      try{
        superFunction(element, _arguments)
      }catch(error){
        console.log(error, $H(_arguments).inspect())
      }
    }
  })
})()

P.S. in IE8 you should open Developer Tools (F12) to have console working.