CODEWITHSUNDEEP
javascriptjqueryinternet-explorerundefined
mtmurdock
mtmurdock

Reputation: 13062

javascript: var is undefined only in IE

I am running into a problem in IE (works fine in chrome, firefox, and safari) where a var that I declared at the document scope is undefined and cannot be written to. It looks something like this:

myFile.js

var background;
var opacity;
var zIndex;

function backupValues() {
   var overlay = $(".ui-widget-overlay");
   background = overlay.css("background");
   opacity = overlay.css("opacity");
   zIndex = overlay.css("z-index");
}

function restoreValue() {
   $(".ui-widget-overlay").css("background", background).css("opacity", opacity).css("z-index", zIndex);
}

I have debugged this in IE and found that both before and after each assignment, all the values are 'undefined'. What is wrong here? Why does this work in other browsers? Does IE have some special caveats concerning document scope variables?

Upvotes: 0

Views: 4804

Answers (2)

mtmurdock
mtmurdock

Reputation: 13062

Turns out the problem was in the .css() function. The jQuery function .css() is supposed to encapsulate the difference between browsers (namely IE uses a different style attribute for opacity than other browsers). However, it seems to be broken on opacity in IE. To make this work on all browsers I would have to manage a lot of properties and cases, which is a bad idea.

The solution was to avoid the problem altogether and use an overall more elegant solution. Instead of backing up the values in vars, I defined a new style in my css file for the values I was going to override. Instead of calling backupValues() and restoreValues(), I simply called .addClass("myClass") and .removeClass("myClass"). This gave me the exact same effect and doesn't have to compensate for differences in browsers which are at times quite complicated.

Upvotes: 0

Tomas Vana
Tomas Vana

Reputation: 18775

If they're undefined after the assignment, that might mean there is simply no value assigned in the css style of the element.

That they're undefined before the assignment is how it should be in all browsers anyway. The value undefined is the default value of any (declared) variable.

Also note that "document scope" variables are actually appended to the global object (in your case most likely the window object) and it's quite a bad practice to pollute the global namespace in this way. One way to overcome it could be to have an anonymous function closure around the whole thing, like: 

(function() {

   var background;
   var opacity;
   var zIndex;

   function backupValues() {
      var overlay = $(".ui-widget-overlay");
      background = overlay.css("background");
      opacity = overlay.css("opacity");
      zIndex = overlay.css("z-index");
   }

   function restoreValue() {
      $(".ui-widget-overlay").css("background", background).css("opacity", opacity).css("z-index", zIndex);
   }

   window.my.fancy.namespace = { 
      backupValues: backupValues,
      restoreValues: restoreValues
   };

}());

This would make the variables local to the scope. The "undefined" behavior stays the same though, as this is how it should behave.

EDIT : although not directly related to your question, I updated the code to show how you can expose the functions to be accessible from outside while keeping the variables local.

Upvotes: 3

Related Questions