Question

I would like to have an object that returns status true/false based on the presence of an element in the DOM. I can’t get the variable to actually maintain a state other than the state of the loaded page. My last attempt was rather stupid and resulted in Maximum call stack size exceeded, which was expected. Any way that I could have these variables change with the DOM?

var navigation = function runNav(){
  runNav();
  var navigation = {
    globe : {
      element : $("#icons .globe"),
      status : (function(){
        return ($(".window_stable.globe").length == 1) ? true : false;
      })()
    },
    cart : {
      element : $("#icons .cart"),
      status : (function(){
        return ($(".window_stable.cart").length == 1) ? true : false
      })()
    },
    phone : {
      element : $("#icons .phone"),
      status : (function(){
        return ($(".window_stable.phone").length == 1) ? true : false
      })()
    }
  }
  return navigation;
}();

example

navigation.cart.status
false
-- Enabled the element
navigation.cart.status
false
($(".window_stable.cart").length == 1) ? true : false
true

Answer 1

I think I get what you’re trying to do. I think you want the function you’ve defined for status to run every time you access the status property.

To my knowledge, I don’t think you can do it just by making it a property. I think you need to make it a function.

Like this: (jsFiddle)

var navigation = {
    globe: {
        element: $("#icons .globe"),
        getStatus: function() { return ($(".window_stable.globe").length > 0); }
    },
    cart: {
        element: $("#icons .cart"),
        getStatus: function() { return ($(".window_stable.cart").length > 0); }
    },
    phone: {
        element: $("#icons .phone"),
        getStatus: function() { return ($(".window_stable.phone").length > 0); }
    }
};

alert("status = "+ navigation.cart.getStatus());