Question

I’m trying to understand why this does not work. (Basic example with no validation yet)

When I test it, firebug states Product.addPage is not found.

var Product = function () {     var Page = function ()     {         var IMAGE = '';          return {             image : function ()             {                 return IMAGE;             },             setImage : function (imageSrc_)             {                 IMAGE = '<img id='image' src='' + imageSrc_ + '' height='100%' width='100%'>';             }         };     };     var PAGES = [];      return {         addPage : function ()         {             var len = PAGES.length + 1;             PAGES[len] = new Page();             return PAGES[len];         },         page : function (pageNumber_)         {             var result = PAGES[pageNumber_];             return result;         }     }; };  // Begin executing $(document).ready(function () {     Product.addPage.setImage('http://site/images/small_logo.png');     alert(Product.page(1).image()); }); 

Answer 1

You’re trying to reference the addPage property of the Product function (which in this case is a constructor), rather than on the returned object.

You probably want something like:

// Begin executing $(document).ready(function () {     var product = new Product();     product.addPage().setImage('http://site/images/small_logo.png');     alert(product.page(1).image()); });

which also adds the brackets to the addPage call (though this is not the problem that FireBug will have been complaining about as it will not be able to find that method anyway).